小技巧！CSS 整塊文本溢出省略特性探究

今天的文章頗有意思，講一講整塊文本溢出省略打點的一些有意思的細節。

文本超長打點

咱們都知道，到今天（2021/03/06），CSS 提供了兩種方式便於咱們進行文本超長的打點省略。

對於單行文本，使用單行省略：

{
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

而對於多行文本的超長省略，使用 -webkit-line-clamp 相關屬性，兼容性也已經很是好了：

{
    width: 200px;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

CodePen Demo -- inline-block 實現整塊的溢出打點

問題一：超長文本整塊省略

基於上述的超長打點省略方案之下，會有一些變化的需求。譬如，咱們有以下結構：

<section>
    <a href="/" class="avatar"></a>
    <div class="info">
        <p class="person-card__name">Sb Coco</p>
        <p class="person-card__desc">
            <span>FE</span>
            <span>UI</span>
            <span>UX Designer</span>
            <span>前端工程師</span>
        </p>
    </div>
</section>

對於上述超出的狀況，咱們但願對於超出文本長度的整一塊 -- 前端工程師，總體被省略。

若是咱們直接使用上述的方案，使用以下的 CSS，結果會是這樣，並不是咱們期待的整塊省略：

.person-card__desc {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

將 display: inline 改成 display: inline-block 實現整塊省略

這裏，若是咱們須要實現一整塊的省略，只須要將包裹整塊標籤元素的 span 的 display 由 inline 改成 inline-block 便可。

.person-card__desc span {
    display: inline-block;
}

這樣，就能夠實現，基於整塊的內容的溢出省略了。完整的 Demo，你能夠戳這裏：

CodePen Demo - 整塊超長溢出打點省略

問題二：iOS 不支持整塊超長溢出打點省略

然而，上述方案並不是完美的。通過實測，上述方案在 iOS 和 Safari 下，沒能生效，表現爲這樣：

查看規範 - CSS Basic User Interface Module Level 3 - text-overflow，究其緣由，在於 text-overflow 只能對內聯元素進行打點省略。（Chrome 對此可能作了一些優化，因此上述非 iOS 和 Safari 的場景是正常的）

因此猜想是由於通過了 display: inline-block 的轉化後，已經再也不是嚴格意義上的內聯元素了。

解決方案，使用多行省略替代單行省略

固然，這裏通過試驗後，發現仍是有解的，咱們在開頭還提到了一種多行省略的方案，咱們將多行省略的代碼替換單行省略，只是行數 -webkit-line-clamp: 2 改爲一行便可 -webkit-line-clamp: 1。

.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 下的整塊超長溢出打點省略方案

值得注意的是，在使用 -webkit-line-clamp 的方案的時候，必定要配合 white-space: normal 容許換行，而不是不換行。這一點，很是重要。

這樣，咱們就實現了全兼容的整塊的超長打點省略了。

固然， -webkit-line-clamp 自己也是存在必定的兼容性問題的，實際使用的時候還須要具體去取捨。

最後

好了，本文到此結束，一個簡單的 CSS 小技巧，但願對你有幫助 :)

想 Get 到最有意思的 CSS 資訊，千萬不要錯過個人公衆號 -- iCSS前端趣聞 😄

更多精彩 CSS 技術文章彙總在個人 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。