在某些段落中，頁面要求文字只顯示一行，但是width固定，而文字過長，就會出現一個需求，超過長度限制的文字被隱藏且顯示省略號，css 支持這樣的屬性。
單行文本溢出隱藏
div{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
多行文本溢出隱藏
div {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
簡單的幾行代碼就可以達到我們的要求。
但是有一個我們需要注意的地方！！
flex 佈局是前端寫代碼經常使用的一種佈局方式，簡單便捷且有效，但是在使用 flex 佈局的元素中不能同時使用文字溢出隱藏, 也就是兩者不能同時出現在同一標籤中。
這裡，我們也有對應的解決辦法。
只要保證 flex 佈局和隱藏的樣式不在同級元素中就可以，所以在文字外部多包裹一層標籤。
可以採用下面這段代碼的寫法；
<p>
<!-- 我們在這一層的標籤進行flex佈局 -->
<span> <!-- 這一層的標籤我們引入文字過長隱藏的樣式 -->
<!-- 文本 -->
</span>
</p>