在微信中看到一篇文章,关于overflow的,以前主要用overflow也就控制一些元素的溢出处理。而文章作者却将overflow玩出新高度,自己回头也做了一些demo,感觉特别有意思。

先看看效果:

如何实现

先看看一段简单的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.overflower {
line-height: 1.5em;
display: inline-block;
padding: 0 1em;
border: 1px solid #000;
box-sizing: border-box;
max-width: 100%;
height: 1.5em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.overflower-long {
display: inline;
}
.overflower-short {
display: none;
}
@supports (flex-wrap: wrap) {
.overflower {
display: inline-flex;
flex-wrap: wrap;
}
.overflower-short {
display: block;
overflow: hidden;
width: 0;
text-overflow: ellipsis;
flex-grow: 1;
}
.overflower-long {
flex-basis: 100%;
}
}
1
2
3
4
5
6
7
<span class="overflower">
<!-- 放置短文本的容器 -->
<span class="overflower-short" aria-hidden="true" title="Some long text that could become shorter">
Short text here is.</span>
<!-- 放置长文本的容器 -->
<span class="overflower-long">Some long text that could become shorter.</span>
</span>

效果为慢慢缩短容器的宽度,可以看到显示不同的长度的文本。

原理

  • 使用@supports做了一个渐进增强的处理,如果浏览器支持flex-wrap属性,那么将使用Flexbox的一些属性的特性,比如容器overflower为inline-flex容器,然后配合flex-grow:1和text-overflow:ellipsis来处理短文本样式,对于长文本,将flex-basis设置为100%
  • 另外需要给容器一个固定的高度。所以设置height的值,同时为了文本能垂直居中,再设置line-height的值和height等同
  • 对于不支持flex-wrap的浏览器,在overflower也就是最外面的容器中,通过text-overflow:ellipsis和white-space来控制文本,当然这个时候短文本就不显示了

缺点

虽然这种方法让我们实现了灵活的overflow,效果是更让人感觉很爽,但却让我们的HTML变得冗余。对于追求HTML简洁干净的人来说简直是不可忍受的事。

更炫的Demo在codepen

参考资料

wechat: 灵活的 overflow

w3cplus: 灵活的overflow