起因

在对一些文本进行处理时经常会遇到文本溢出的情况，而溢出显示省略号是一个良好的实践。

今天，记录一下常用的文本溢出处理方式。

单行溢出

代码实现：

1
2
3
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

tips: 增加width属性以兼容部分浏览器。

多行溢出

代码实现：

1
2
3
4
display: -webkit-box; /* 弹性盒子 */
-webkit-box-orient: vertical; /* 从上向下垂直排列子元素。 */
-webkit-line-clamp: 3; /* 限制在一个块元素显示的文本的行数 */
overflow: hidden;

tips: line-clamp属性在webkit内核的可以实现，所以此方法一般用于webkit内核浏览器，比如移动端。

多行溢出模拟

代码实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
p{
position: relative;
line-height: 20px;
max-height: 40px;
overflow: hidden;
}
p:after{
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}

tips: 该方法未超出指定行数的情况下也会显示省略号。

待续中。。。

何莹亮原创技术文章，转载请注明出处：https://heyingliang.github.io/mark/2018/02/28/text-overflow/

目录