单行文本溢出处理
首先,容器需要设置固定的宽度,以span
标签为例:
span{
width:100px;
}
接下来设置元素的如下属性:
span{
width:100px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
这样单行文本的溢出处理就完成了。
多行文本溢出处理
同单行文本一样,也要规定容器的宽度,于单行文本不同的是将white-space
属性替换为如下属性:
display: -webkit-box;
overflow: hidden;
word-break:break-all;
text-overflow:ellipsis;
-webkit-box-orient:vertical;
-webkit-line-clamp:2; //设置显示的文本行数
可以自己测试一下效果。