单行文本
记得添加宽度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;数字效果:
英文效果:
单词长短
正常的场景不会出现上述英文,而是英语长句标题.
单词会因为太长而自动换行到下一行,即使上部分留白很大一部分
效果如图:
只有一个单词撑满一整行的时候才会按字母断句,显然这种情况不多.
效果如图:
