css实现单行和多行文本超出省略显示省略号…

原文链接: https://dsx2016.com/?p=676

单行文本

记得添加宽度width来限定范围

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

效果如图:

多行文本

注意-webkit的兼容性,主要适配webkit内核浏览器和移动端

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

效果如图:

数字和英文

单行和多行文本很容易实现超出省略号,但是也要留心中英文和数字.

上述两种中文情况下没有问题,但是遇上超长数字和英文就会失效.

数字如图:

英文如图:

解决方式:

word-wrap: break-word;

数字效果:

英文效果:

单词长短

正常的场景不会出现上述英文,而是英语长句标题.

单词会因为太长而自动换行到下一行,即使上部分留白很大一部分

效果如图:

只有一个单词撑满一整行的时候才会按字母断句,显然这种情况不多.

效果如图: