一：单行文本显示不完时，我们只需要设置单行文本的宽度，不允许换行，溢出隐藏及换行省略四个属性即可：

p{

max-width: 100px;

overflow:hidden;

text-overflow:ellipsis;

/*禁止换行显示*/

white-space:nowrap;

background-color:#ffe51a;

}

哈哈哈哈哈哈哈，哈哈哈哈哈，哈哈哈哈哈哈哈

二：当我们想要设置多行文本显示不完省略号时：

p {

width: 100px;

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

/*控制在3行*/

-webkit-line-clamp:3;

-webkit-box-orient:vertical;

background-color:#ffe51a;

}

-webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

它用来限制在一个块元素显示的文本的行数。