最近在前端開發中，無論是在網頁設計還是實現過程中，都經常會遇到文本內容過多需要進行省略的情況。而其中一個常用的方法就是多行文本省略號。下面，我們就來一起了解一下在CSS中如何實現多行文本省略號。
在CSS中實現多行文本省略的方法，需要依靠兩個CSS樣式屬性。分別是：
1. display: -webkit-box;
這個屬性可以按照我們自己設定的行數來自動折疊多余的部分，并在行末添加省略號。同時需要注意的是，在使用時還需要同時添加以下屬性：
-webkit-box-orient: vertical; // 設置翻轉方向為垂直方向（縱向）
-webkit-line-clamp: 行數; // 設置需要顯示的行數
比如說，如果我們要讓一個
元素只顯示4行內容，并在多于4行內容時添加省略號，那么我們就需要這樣寫CSS樣式：
```
div {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
```
2.text-overflow: ellipsis;
這個屬性可以自動在文本內容過長時，在文本末尾添加省略號。但是這個屬性只適用于單行文本內容，如果我們要使用這個屬性用于多行文本內容，那么我們需要同時設置以下兩個屬性：
white-space: nowrap; // 強制不換行
overflow: hidden;
比如說，我們可以這樣寫CSS樣式來實現這個效果：
```
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
```
了解了上述兩種CSS屬性，我們就可以輕松實現多行文本省略號。通過CSS屬性的設置，我們可以按照自己的需要來設置行數，并添加省略號，讓內容顯示更加美觀。
上一篇多選 input css
下一篇多行折疊CSS