小技巧！CSS 整塊文字溢位省略特性探究
阿新 • • 發佈：2021-03-12
今天的文章很有意思，講一講整塊文字溢位省略打點的一些有意思的細節。
## 文字超長打點
我們都知道，到今天（2021/03/06），CSS 提供了兩種方式便於我們進行文字超長的打點省略。
對於**單行文字**，使用單行省略：
```CSS
{
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
```
而對於**多行文字**的超長省略，使用 `-webkit-line-clamp` 相關屬性，相容性也已經非常好了：
```CSS
{
width: 200px;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
```
[CodePen Demo -- inline-block 實現整塊的溢位打點](https://codepen.io/Chokcoco/pen/JjbBpdN)
## 問題一：超長文字整塊省略
基於上述的超長打點省略方案之下，會有一些變化的需求。譬如，我們有如下結構：
```HTML
```
對於上述超出的情況，我們希望對於超出文字長度的整一塊 -- **前端工程師**，整體被省略。
如果我們直接使用上述的方案，使用如下的 CSS，結果會是這樣，並非我們期待的整塊省略：
```CSS
.person-card__desc {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
```
### 將 `display: inline` 改為 `display: inline-block` 實現整塊省略
這裡，如果我們需要實現一整塊的省略，只需要將包裹整塊標籤元素的 `span` 的 `display` 由 `inline` 改為 `inline-block` 即可。
```CSS
.person-card__desc span {
display: inline-block;
}
```
這樣，就可以實現，基於整塊的內容的溢位省略了。完整的 Demo，你可以戳這裡：
[CodePen Demo - 整塊超長溢位打點省略](https://codepen.io/Chokcoco/pen/XWNPdpK?editors=1100)
## 問題二：iOS 不支援整塊超長溢位打點省略
然而，上述方案並非完美的。經過實測，上述方案在 **iOS** 和 **Safari** 下，沒能生效，表現為這樣：
檢視規範 - [CSS Basic User Interface Module Level 3 - text-overflow](https://drafts.csswg.org/css-ui-3/#text-overflow)，究其原因，在於 `text-overflow` 只能對內聯元素進行打點省略。（Chrome 對此可能做了一些優化，所以上述非 iOS 和 Safari 的場景是正常的）
所以猜測是因為經過了 `display: inline-block` 的轉化後，已經不再是嚴格意義上的內聯元素了。
### 解決方案，使用多行省略替代單行省略
當然，這裡經過試驗後，發現還是有解的，我們在開頭還提到了一種多行省略的方案，我們將多行省略的程式碼替換單行省略，只是行數 `-webkit-line-clamp: 2` 改成一行即可 `-webkit-line-clamp: 1`。
```CSS
.person-card__desc {
width: 200px;
white-space: normal;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.person-card__desc span {
display: inline-block;
}
```
這樣，在 iOS/Safari 下也能完美實現整塊的超長打點省略：
[CodePen Demo -- iOS 下的整塊超長溢位打點省略方案](https://codepen.io/Chokcoco/pen/XWNPdpK?editors=1100)
值得注意的是，在使用 ` -webkit-line-clamp` 的方案的時候，一定要配合 `white-space: normal` 允許換行，而不是不換行。這一點，非常重要。
這樣，我們就實現了全相容的整塊的超長打點省略了。
當然，` -webkit-line-clamp` 本身也是存在一定的相容性問題的，實際使用的時候還需要具體去取捨。
## 最後
好了，本文到此結束，一個簡單的 CSS 小技巧，希望對你有幫助 :)
更多精彩 CSS 技術文章彙總在我的 [Github -- iCSS](https://github.com/chokcoco/iCSS) ，持續更新，歡迎點個 star 訂閱收藏。
如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望
Sb Coco
FE UI UX Designer 前端工程師