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