多行文本溢出处理

单行文本溢出处理

首先,容器需要设置固定的宽度,以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; //设置显示的文本行数

可以自己测试一下效果。