css 文本溢出

多行文本溢出处理：

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

 

单行文本溢出处理：

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

 

但如果溢出效果的文本外还有一层 p ，则溢出效果不会显示，如下代码 ：

<div>
  <p>老师你给是风格顺过饰非色发给</p>
</div>

解决办法是将 p 的 display 设为 inline