单行文本显示省略号
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
适用于不管内容多少,只希望显示一行,超出部分显示成省略号,以上三个缺一不可。
多行文本显示省略号
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; /*box,一种流体布局*/
-webkit-box-orient: vertical; /*子元素默认排列方式,这里默认vertical即可*/
-webkit-line-clamp: 6; /*指定显示多少行*/
由于项目是移动端的,通过-webkit这个前缀可以看出,此方式在chrome和移动端试用。
由于box并不兼容所有的浏览器,有空的时候再来研究一下各个浏览器多行文本省略号的实现。