面試官當(dāng)場(chǎng)要我寫(xiě)一個(gè) CSS 整塊文本溢出省略方案......

今天的文章很有意思，講一講整塊文本溢出省略打點(diǎn)的一些有意思的細(xì)節(jié)。

文本超長(zhǎng)打點(diǎn)

我們都知道，到今天（2021/03/06），CSS 提供了兩種方式便于我們進(jìn)行文本超長(zhǎng)的打點(diǎn)省略。

對(duì)于單行文本，使用單行省略：

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

而對(duì)于多行文本的超長(zhǎng)省略，使用 -webkit-line-clamp 相關(guān)屬性，兼容性也已經(jīng)非常好了：

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

CodePen Demo -- inline-block 實(shí)現(xiàn)整塊的溢出打點(diǎn)^[1]

問(wèn)題一：超長(zhǎng)文本整塊省略

基于上述的超長(zhǎng)打點(diǎn)省略方案之下，會(huì)有一些變化的需求。譬如，我們有如下結(jié)構(gòu)：

<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>

對(duì)于上述超出的情況，我們希望對(duì)于超出文本長(zhǎng)度的整一塊 -- 前端工程師，整體被省略。

如果我們直接使用上述的方案，使用如下的 CSS，結(jié)果會(huì)是這樣，并非我們期待的整塊省略：

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

將 display: inline 改為 display: inline-block 實(shí)現(xiàn)整塊省略

這里，如果我們需要實(shí)現(xiàn)一整塊的省略，只需要將包裹整塊標(biāo)簽元素的 span 的 display 由 inline 改為 inline-block 即可。

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

這樣，就可以實(shí)現(xiàn)，基于整塊的內(nèi)容的溢出省略了。完整的 Demo，你可以戳這里：

CodePen Demo - 整塊超長(zhǎng)溢出打點(diǎn)省略^[2]

問(wèn)題二：iOS 不支持整塊超長(zhǎng)溢出打點(diǎn)省略

然而，上述方案并非完美的。經(jīng)過(guò)實(shí)測(cè)，上述方案在 iOS 和 Safari 下，沒(méi)能生效，表現(xiàn)為這樣：

查看規(guī)范 - CSS Basic User Interface Module Level 3 - text-overflow^[3]，究其原因，在于 text-overflow 只能對(duì)內(nèi)聯(lián)元素進(jìn)行打點(diǎn)省略。（Chrome 對(duì)此可能做了一些優(yōu)化，所以上述非 iOS 和 Safari 的場(chǎng)景是正常的）

所以猜測(cè)是因?yàn)榻?jīng)過(guò)了 display: inline-block 的轉(zhuǎn)化后，已經(jīng)不再是嚴(yán)格意義上的內(nèi)聯(lián)元素了。

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

當(dāng)然，這里經(jīng)過(guò)試驗(yàn)后，發(fā)現(xiàn)還是有解的，我們?cè)陂_(kāi)頭還提到了一種多行省略的方案，我們將多行省略的代碼替換單行省略，只是行數(shù) -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 下也能完美實(shí)現(xiàn)整塊的超長(zhǎng)打點(diǎn)省略：

CodePen Demo -- iOS 下的整塊超長(zhǎng)溢出打點(diǎn)省略方案^[4]

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

這樣，我們就實(shí)現(xiàn)了全兼容的整塊的超長(zhǎng)打點(diǎn)省略了。

當(dāng)然，-webkit-line-clamp 本身也是存在一定的兼容性問(wèn)題的，實(shí)際使用的時(shí)候還需要具體去取舍。

最后

好了，本文到此結(jié)束，一個(gè)簡(jiǎn)單的 CSS 小技巧，希望對(duì)你有幫助 :)

更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS^[5] ，持續(xù)更新，歡迎點(diǎn)個(gè) star 訂閱收藏。

如果還有什么疑問(wèn)或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬(wàn)望告知。

參考資料