小技巧!CSS 整塊文字溢位省略特性探究

ChokCoco發表於2021-03-12

今天的文章很有意思,講一講整塊文字溢位省略打點的一些有意思的細節。

文字超長打點

我們都知道,到今天(2021/03/06),CSS 提供了兩種方式便於我們進行文字超長的打點省略。

對於單行文字,使用單行省略:

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

image

而對於多行文字的超長省略,使用 -webkit-line-clamp 相關屬性,相容性也已經非常好了:

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

image

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>

image

對於上述超出的情況,我們希望對於超出文字長度的整一塊 -- 前端工程師,整體被省略。

如果我們直接使用上述的方案,使用如下的 CSS,結果會是這樣,並非我們期待的整塊省略:

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

image

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

這裡,如果我們需要實現一整塊的省略,只需要將包裹整塊標籤元素的 spandisplayinline 改為 inline-block 即可。

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

image

這樣,就可以實現,基於整塊的內容的溢位省略了。完整的 Demo,你可以戳這裡:

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

問題二:iOS 不支援整塊超長溢位打點省略

然而,上述方案並非完美的。經過實測,上述方案在 iOSSafari 下,沒能生效,表現為這樣:

image

檢視規範 - 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 下也能完美實現整塊的超長打點省略:

image

CodePen Demo -- iOS 下的整塊超長溢位打點省略方案

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

這樣,我們就實現了全相容的整塊的超長打點省略了。

當然, -webkit-line-clamp 本身也是存在一定的相容性問題的,實際使用的時候還需要具體去取捨。

最後

好了,本文到此結束,一個簡單的 CSS 小技巧,希望對你有幫助 ?

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

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

相關文章