CSS 奇技淫巧 | 巧妙實現(xiàn)文本"不定行數(shù)"截斷

正文從下面開始。

偶然發(fā)現(xiàn)，在某乎熱榜頁^[1]有一個很有意思的布局，這里的標題會制約內(nèi)容的行數(shù)，所以文本超出是不定行的。詳細規(guī)則如下：

1. 整個容器高度是固定的，標題和內(nèi)容總共 3 行
2. 標題最多2行，超出省略
3. 內(nèi)容由剩余空間決定，如果標題占2行，則內(nèi)容超出1行省略；如果標題占1行，則內(nèi)容超出2行省略

是不是很靈（離）活（譜）的交互？可以充分利用頁面空間，保證標題和內(nèi)容都能展示出來，示意如下

看了下原站的實現(xiàn)，是通過 js 判斷標題高度，然后動態(tài)添加一個類名實現(xiàn)的。不過呢，經(jīng)過一番琢磨，這里也是可以純 CSS 實現(xiàn)的，一起來看看吧

一、標題超出省略

假設有這樣一段 HTML

<div?class="section">
????<h3?class="title">LGD 在 TI10?放猛犸，RNG 在 S7 放加里奧最后都輸了，哪個更讓你憤怒失望？h3>
????<p?class="excerpt">猛犸是對面的絕中絕，大家都知道，并且之前扳回兩局已經(jīng)證明了，當lgd選擇ban掉猛犸，或者自己搶掉猛犸時，對面完全不是對手。p?>
div>

標題的規(guī)則是超出2行省略，這個簡單，直接用**-webkit-line-clamp **實現(xiàn)

.title{
????overflow:?hidden;
????display:?-webkit-box;
????-webkit-line-clamp:?2;
????-webkit-box-orient:?vertical;
}

超出2行就會自動省略了

二、內(nèi)容自適應行數(shù)

由于整個高度是固定的，如果讓內(nèi)容部分自適應剩余空間是不是就實現(xiàn)了呢？提到自適應剩余空間，可以馬上想到 flex 布局，所以可以這樣來實現(xiàn)：

.section{
????display:?flex;
????overflow:?hidden;
????height:?72px;/*定一個高度*/
????flex-direction:?column;
}
.excerpt{
???flex:?1;?/*自適應剩余空間*/
???overflow:?hidden;
}

這樣借助flex: 1;overflow: hidden;就幾乎實現(xiàn)了想要的效果，如下

已經(jīng)很完美，只是現(xiàn)在超出還沒有省略號，接著往下看

三、不定行超出省略

一般情況，-webkit-line-clamp適用于行數(shù)確定的情況下，現(xiàn)在行數(shù)不定，有時是 1 行，有時是 2 行，如何處理呢？這里就需要一些奇技淫巧了。大家可能還記得這篇文章 CSS 實現(xiàn)多行文本“展開收起” - 掘金 (juejin.cn)^[2]，里面就提到了如何使用浮動來實現(xiàn)文本超出省略的效果，有興趣的可以參考一下。

1. 右下角環(huán)繞效果

首先添加一個偽元素，設置右浮動

.excerpt::before{
????content:?'...';
????float:?right;
}

很明顯省略號目前是在右上角的，現(xiàn)在需要挪到右下角來，之前的操作是通過一個浮動元素把這個省略號擠下來，但是需要額外的占位元素

這里再介紹一種新的方式，借助 CSS shapes 布局^[3]實現(xiàn)!

首先，將省略號高度撐滿，并居下對齊，可以用 flex 實現(xiàn)

.excerpt::before{
????content:?'...';
????float:?right;
???height:?100%;
????display:?flex;
????align-items:?flex-end;
}

這樣省略號雖然到了右下角，但是上面的部分也被擠走了，沒有達到環(huán)繞的效果。這時就可以用 shapes 布局了，不了解這個布局的，可以參考一下 張鑫旭 的這篇文章：寫給自己看的CSS shapes布局教程 ? 張鑫旭-鑫空間-鑫生活 (zhangxinxu.com)^[4]

這里僅僅只需要利用到 shape-outside:inset()就可以了，表示以自身為邊界，然后上、右、下、左四個方向分別向內(nèi)縮進的距離。比如這里需要縮進到靠近省略號位置，所以

.excerpt::before{
????/*其他樣式**/
???shape-outside:?inset(calc(100%?-?1.5em)?0?0);
}

效果如下

去除背景，可以看到省略號完美的環(huán)繞在右下角

2. 自動隱藏省略號

現(xiàn)在還有一個問題，需要文本較少時隱藏省略號，該如何實現(xiàn)呢？可以試試 “CSS 障眼法”

簡單來說，就是用一個足夠大的色塊蓋住省略號，設置絕對定位后，色塊是跟隨內(nèi)容文本的，所以在文字較多時，色塊也跟隨文本擠下去了，實現(xiàn)如下

.excerpt::after{
????content:?'';
????position:?absolute;
????width:?999vh;
????height:?999vh;
????background:?#fff;
}?

原理示意如下

個別極端情況可能會遮擋不住，比如

沒關(guān)系，可以隨便找個東西補上，比如 box-shadow，往左下角偏移一點就可以了

.excerpt::after{
????content:?'';
????position:?absolute;
????width:?999vh;
????height:?999vh;
????background:?#fff;
???box-shadow:?-2em?2em?#fff;?/*左下的陰影*/
}?

設置和底色相同的顏色后，最終的效果如下

這樣就實現(xiàn)了文章開頭某乎的交互效果，完整代碼可訪問 auto-clamp (codepen.io)^[5]

四、總結(jié)和說明

以上實現(xiàn)了一個不定行數(shù)的文本截斷效果，融合了許多 CSS 小技巧，除了 shapes 布局以外（當然也可以采用其他方式實現(xiàn)），沒有太多陌生的屬性，下面簡單總結(jié)一下：

1. 多行省略直接使用 -webkit-line-clamp，現(xiàn)代瀏覽器都支持
2. flex 布局可以很方便的處理剩余空間
3. float + shapes 布局也可以實現(xiàn)右下角環(huán)繞效果
4. box-shadow 在障眼法中很常見
5. 適當積累一些 CSS 奇技淫巧，有時候會幫上大忙

在我看來，布局的事情當然最好由 CSS 解決，實現(xiàn)更靈活，渲染更迅速，沒有框架限制，無需等待 dom 加載，無需 JS 計算尺寸，無需遍歷節(jié)點，好處太多了。如果覺得還不錯，對你有幫助的話，歡迎點贊、收藏、轉(zhuǎn)發(fā)???

參考資料