一、单行文本溢出省略:
white-space属性:用来设置元素中的空白如何处理,默认值为normal,即会自动忽略多余的空格和换行符。
nowrap:文本不会换行。
text-overflow属性:用来控制溢出文本的显示方式,默认值为clip,即将溢出部分截去。
ellipsis:显示省略号。
示例代码:
.overflow {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
二、多行文本溢出省略:
多行文本溢出省略也可以通过设置text-overflow属性来实现。但是,text-overflow属性对于多行文本是不起作用的,需要结合其他属性来实现。
-webkit-line-clamp:限制显示的行数。
display:-webkit-box,变成一个块级盒子。
-webkit-box-orient:用来设置块级盒子的排列方向为垂直方向。
示例代码:
.overflow {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
overflow: hidden;
}