单行和多行文本显示省略号

单行文本显示省略号

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并不兼容所有的浏览器，有空的时候再来研究一下各个浏览器多行文本省略号的实现。