CSS 奇技淫巧 | 巧妙實(shí)現(xiàn)文本"不定行數(shù)"截?cái)?/h1>
Hello，大家好，我是 Coco，今天又是一篇 CSS 的奇技淫巧。由閱文前端?XboxYan 投稿，授權(quán)原創(chuàng)轉(zhuǎn)發(fā)。原文地址：https://juejin.cn/post/7022876094608982030。
正文從下面開始。
偶然發(fā)現(xiàn)，在某乎熱榜頁(yè)[1]有一個(gè)很有意思的布局，這里的標(biāo)題會(huì)制約內(nèi)容的行數(shù)，所以文本超出是不定行的。詳細(xì)規(guī)則如下：
整個(gè)容器高度是固定的，標(biāo)題和內(nèi)容總共 3 行 標(biāo)題最多2行，超出省略 內(nèi)容由剩余空間決定，如果標(biāo)題占2行，則內(nèi)容超出1行省略；如果標(biāo)題占1行，則內(nèi)容超出2行省略
是不是很靈（離）活（譜）的交互？可以充分利用頁(yè)面空間，保證標(biāo)題和內(nèi)容都能展示出來(lái)，示意如下
看了下原站的實(shí)現(xiàn)，是通過(guò) js 判斷標(biāo)題高度，然后動(dòng)態(tài)添加一個(gè)類名實(shí)現(xiàn)的。不過(guò)呢，經(jīng)過(guò)一番琢磨，這里也是可以純 CSS 實(shí)現(xiàn)的，一起來(lái)看看吧
一、標(biāo)題超出省略
假設(shè)有這樣一段 HTML
<div?class="section">
????<h3?class="title">LGD 在 TI10?放猛犸，RNG 在 S7 放加里奧最后都輸了，哪個(gè)更讓你憤怒失望？h3>
????<p?class="excerpt">猛犸是對(duì)面的絕中絕，大家都知道，并且之前扳回兩局已經(jīng)證明了，當(dāng)lgd選擇ban掉猛犸，或者自己搶掉猛犸時(shí)，對(duì)面完全不是對(duì)手。p?>
div>
標(biāo)題的規(guī)則是超出2行省略，這個(gè)簡(jiǎn)單，直接用**-webkit-line-clamp **實(shí)現(xiàn)
.title{
????overflow:?hidden;
????display:?-webkit-box;
????-webkit-line-clamp:?2;
????-webkit-box-orient:?vertical;
}
超出2行就會(huì)自動(dòng)省略了
二、內(nèi)容自適應(yīng)行數(shù)
由于整個(gè)高度是固定的，如果讓內(nèi)容部分自適應(yīng)剩余空間是不是就實(shí)現(xiàn)了呢？提到自適應(yīng)剩余空間，可以馬上想到 flex 布局，所以可以這樣來(lái)實(shí)現(xiàn)：
.section{
????display:?flex;
????overflow:?hidden;
????height:?72px;/*定一個(gè)高度*/
????flex-direction:?column;
}
.excerpt{
???flex:?1;?/*自適應(yīng)剩余空間*/
???overflow:?hidden;
}
這樣借助flex: 1;overflow: hidden;就幾乎實(shí)現(xiàn)了想要的效果，如下
已經(jīng)很完美，只是現(xiàn)在超出還沒(méi)有省略號(hào)，接著往下看
三、不定行超出省略
一般情況，-webkit-line-clamp適用于行數(shù)確定的情況下，現(xiàn)在行數(shù)不定，有時(shí)是 1 行，有時(shí)是 2 行，如何處理呢？這里就需要一些奇技淫巧了。大家可能還記得這篇文章 CSS 實(shí)現(xiàn)多行文本“展開收起” - 掘金 (juejin.cn)[2]，里面就提到了如何使用浮動(dòng)來(lái)實(shí)現(xiàn)文本超出省略的效果，有興趣的可以參考一下。
1. 右下角環(huán)繞效果
首先添加一個(gè)偽元素，設(shè)置右浮動(dòng)
.excerpt::before{
????content:?'...';
????float:?right;
}
很明顯省略號(hào)目前是在右上角的，現(xiàn)在需要挪到右下角來(lái)，之前的操作是通過(guò)一個(gè)浮動(dòng)元素把這個(gè)省略號(hào)擠下來(lái)，但是需要額外的占位元素
這里再介紹一種新的方式，借助 CSS shapes 布局[3]實(shí)現(xiàn)!
首先，將省略號(hào)高度撐滿，并居下對(duì)齊，可以用 flex 實(shí)現(xiàn)
.excerpt::before{
????content:?'...';
????float:?right;
???height:?100%;
????display:?flex;
????align-items:?flex-end;
}
這樣省略號(hào)雖然到了右下角，但是上面的部分也被擠走了，沒(méi)有達(dá)到環(huán)繞的效果。這時(shí)就可以用 shapes 布局了，不了解這個(gè)布局的，可以參考一下 張?chǎng)涡?的這篇文章：寫給自己看的CSS shapes布局教程 ? 張?chǎng)涡?鑫空間-鑫生活 (zhangxinxu.com)[4]
這里僅僅只需要利用到 shape-outside:inset()就可以了，表示以自身為邊界，然后上、右、下、左四個(gè)方向分別向內(nèi)縮進(jìn)的距離。比如這里需要縮進(jìn)到靠近省略號(hào)位置，所以
.excerpt::before{
????/*其他樣式**/
???shape-outside:?inset(calc(100%?-?1.5em)?0?0);
}
效果如下
去除背景，可以看到省略號(hào)完美的環(huán)繞在右下角
2. 自動(dòng)隱藏省略號(hào)
現(xiàn)在還有一個(gè)問(wèn)題，需要文本較少時(shí)隱藏省略號(hào)，該如何實(shí)現(xiàn)呢？可以試試 “CSS 障眼法”
簡(jiǎn)單來(lái)說(shuō)，就是用一個(gè)足夠大的色塊蓋住省略號(hào)，設(shè)置絕對(duì)定位后，色塊是跟隨內(nèi)容文本的，所以在文字較多時(shí)，色塊也跟隨文本擠下去了，實(shí)現(xiàn)如下
.excerpt::after{
????content:?'';
????position:?absolute;
????width:?999vh;
????height:?999vh;
????background:?#fff;
}?
原理示意如下
個(gè)別極端情況可能會(huì)遮擋不住，比如
沒(méi)關(guān)系，可以隨便找個(gè)東西補(bǔ)上，比如 box-shadow，往左下角偏移一點(diǎn)就可以了
.excerpt::after{
????content:?'';
????position:?absolute;
????width:?999vh;
????height:?999vh;
????background:?#fff;
???box-shadow:?-2em?2em?#fff;?/*左下的陰影*/
}?
設(shè)置和底色相同的顏色后，最終的效果如下
這樣就實(shí)現(xiàn)了文章開頭某乎的交互效果，完整代碼可訪問(wèn) auto-clamp (codepen.io)[5]
四、總結(jié)和說(shuō)明
以上實(shí)現(xiàn)了一個(gè)不定行數(shù)的文本截?cái)嘈Ч?，融合了許多 CSS 小技巧，除了 shapes 布局以外（當(dāng)然也可以采用其他方式實(shí)現(xiàn)），沒(méi)有太多陌生的屬性，下面簡(jiǎn)單總結(jié)一下：
多行省略直接使用 -webkit-line-clamp，現(xiàn)代瀏覽器都支持 flex 布局可以很方便的處理剩余空間 float + shapes 布局也可以實(shí)現(xiàn)右下角環(huán)繞效果 box-shadow 在障眼法中很常見 適當(dāng)積累一些 CSS 奇技淫巧，有時(shí)候會(huì)幫上大忙
在我看來(lái)，布局的事情當(dāng)然最好由 CSS 解決，實(shí)現(xiàn)更靈活，渲染更迅速，沒(méi)有框架限制，無(wú)需等待 dom 加載，無(wú)需 JS 計(jì)算尺寸，無(wú)需遍歷節(jié)點(diǎn)，好處太多了。如果覺(jué)得還不錯(cuò)，對(duì)你有幫助的話，歡迎點(diǎn)贊、收藏、轉(zhuǎn)發(fā)???
參考資料
[1]某乎熱榜頁(yè): https://www.zhihu.com/hot
[2]CSS 實(shí)現(xiàn)多行文本“展開收起” - 掘金 (juejin.cn): https://juejin.cn/post/6963904955262435336
[3]CSS shapes 布局: https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside
[4]寫給自己看的CSS shapes布局教程 ? 張?chǎng)涡?鑫空間-鑫生活 (zhangxinxu.com): https://www.zhangxinxu.com/wordpress/2019/02/css-css3-shapes/
[5]auto-clamp (codepen.io): https://codepen.io/xboxyan/pen/zYdozbv
iCSS，不止于 CSS，如果你也對(duì)各種新奇有趣的前端（CSS）知識(shí)感興趣，歡迎關(guān)注?。同時(shí)如果你有任何想法疑問(wèn)，歡迎加我的微信?「coco1s 」，一起探討！ 后臺(tái)回復(fù)：typescript，獲取我寫的 typescript 系列文章，絕對(duì)精品 后臺(tái)回復(fù)：電子書，自動(dòng)獲取我為大家整理的大量經(jīng)典電子書，省去你篩選以及下載的時(shí)間 后臺(tái)回復(fù)：不一樣的前端，自動(dòng)獲取精選優(yōu)質(zhì)前端文章。 后臺(tái)回復(fù)：算法，自動(dòng)獲取精選算法文章。另外也可關(guān)注我的另外一個(gè)專注算法的公眾號(hào)力扣加加。 后臺(tái)回復(fù)：每日一薦，自動(dòng)獲取我為大家總結(jié)的每日一薦月刊，內(nèi)含精品文章，實(shí)用技巧，高效工具等等
瀏覽
36
正文從下面開始。
偶然發(fā)現(xiàn)，在某乎熱榜頁(yè)[1]有一個(gè)很有意思的布局，這里的標(biāo)題會(huì)制約內(nèi)容的行數(shù)，所以文本超出是不定行的。詳細(xì)規(guī)則如下：
整個(gè)容器高度是固定的，標(biāo)題和內(nèi)容總共 3 行 標(biāo)題最多2行，超出省略 內(nèi)容由剩余空間決定，如果標(biāo)題占2行，則內(nèi)容超出1行省略；如果標(biāo)題占1行，則內(nèi)容超出2行省略
是不是很靈（離）活（譜）的交互？可以充分利用頁(yè)面空間，保證標(biāo)題和內(nèi)容都能展示出來(lái)，示意如下
看了下原站的實(shí)現(xiàn)，是通過(guò) js 判斷標(biāo)題高度，然后動(dòng)態(tài)添加一個(gè)類名實(shí)現(xiàn)的。不過(guò)呢，經(jīng)過(guò)一番琢磨，這里也是可以純 CSS 實(shí)現(xiàn)的，一起來(lái)看看吧
一、標(biāo)題超出省略
假設(shè)有這樣一段 HTML
<div?class="section">
????<h3?class="title">LGD 在 TI10?放猛犸，RNG 在 S7 放加里奧最后都輸了，哪個(gè)更讓你憤怒失望？h3>
????<p?class="excerpt">猛犸是對(duì)面的絕中絕，大家都知道，并且之前扳回兩局已經(jīng)證明了，當(dāng)lgd選擇ban掉猛犸，或者自己搶掉猛犸時(shí)，對(duì)面完全不是對(duì)手。p?>
div>
標(biāo)題的規(guī)則是超出2行省略，這個(gè)簡(jiǎn)單，直接用**-webkit-line-clamp **實(shí)現(xiàn)
.title{
????overflow:?hidden;
????display:?-webkit-box;
????-webkit-line-clamp:?2;
????-webkit-box-orient:?vertical;
}
超出2行就會(huì)自動(dòng)省略了
二、內(nèi)容自適應(yīng)行數(shù)
由于整個(gè)高度是固定的，如果讓內(nèi)容部分自適應(yīng)剩余空間是不是就實(shí)現(xiàn)了呢？提到自適應(yīng)剩余空間，可以馬上想到 flex 布局，所以可以這樣來(lái)實(shí)現(xiàn)：
.section{
????display:?flex;
????overflow:?hidden;
????height:?72px;/*定一個(gè)高度*/
????flex-direction:?column;
}
.excerpt{
???flex:?1;?/*自適應(yīng)剩余空間*/
???overflow:?hidden;
}
這樣借助flex: 1;overflow: hidden;就幾乎實(shí)現(xiàn)了想要的效果，如下
已經(jīng)很完美，只是現(xiàn)在超出還沒(méi)有省略號(hào)，接著往下看
三、不定行超出省略
一般情況，-webkit-line-clamp適用于行數(shù)確定的情況下，現(xiàn)在行數(shù)不定，有時(shí)是 1 行，有時(shí)是 2 行，如何處理呢？這里就需要一些奇技淫巧了。大家可能還記得這篇文章 CSS 實(shí)現(xiàn)多行文本“展開收起” - 掘金 (juejin.cn)[2]，里面就提到了如何使用浮動(dòng)來(lái)實(shí)現(xiàn)文本超出省略的效果，有興趣的可以參考一下。
1. 右下角環(huán)繞效果
首先添加一個(gè)偽元素，設(shè)置右浮動(dòng)
.excerpt::before{
????content:?'...';
????float:?right;
}
很明顯省略號(hào)目前是在右上角的，現(xiàn)在需要挪到右下角來(lái)，之前的操作是通過(guò)一個(gè)浮動(dòng)元素把這個(gè)省略號(hào)擠下來(lái)，但是需要額外的占位元素
這里再介紹一種新的方式，借助 CSS shapes 布局[3]實(shí)現(xiàn)!
首先，將省略號(hào)高度撐滿，并居下對(duì)齊，可以用 flex 實(shí)現(xiàn)
.excerpt::before{
????content:?'...';
????float:?right;
???height:?100%;
????display:?flex;
????align-items:?flex-end;
}
這樣省略號(hào)雖然到了右下角，但是上面的部分也被擠走了，沒(méi)有達(dá)到環(huán)繞的效果。這時(shí)就可以用 shapes 布局了，不了解這個(gè)布局的，可以參考一下 張?chǎng)涡?的這篇文章：寫給自己看的CSS shapes布局教程 ? 張?chǎng)涡?鑫空間-鑫生活 (zhangxinxu.com)[4]
這里僅僅只需要利用到 shape-outside:inset()就可以了，表示以自身為邊界，然后上、右、下、左四個(gè)方向分別向內(nèi)縮進(jìn)的距離。比如這里需要縮進(jìn)到靠近省略號(hào)位置，所以
.excerpt::before{
????/*其他樣式**/
???shape-outside:?inset(calc(100%?-?1.5em)?0?0);
}
效果如下
去除背景，可以看到省略號(hào)完美的環(huán)繞在右下角
2. 自動(dòng)隱藏省略號(hào)
現(xiàn)在還有一個(gè)問(wèn)題，需要文本較少時(shí)隱藏省略號(hào)，該如何實(shí)現(xiàn)呢？可以試試 “CSS 障眼法”
簡(jiǎn)單來(lái)說(shuō)，就是用一個(gè)足夠大的色塊蓋住省略號(hào)，設(shè)置絕對(duì)定位后，色塊是跟隨內(nèi)容文本的，所以在文字較多時(shí)，色塊也跟隨文本擠下去了，實(shí)現(xiàn)如下
.excerpt::after{
????content:?'';
????position:?absolute;
????width:?999vh;
????height:?999vh;
????background:?#fff;
}?
原理示意如下
個(gè)別極端情況可能會(huì)遮擋不住，比如
沒(méi)關(guān)系，可以隨便找個(gè)東西補(bǔ)上，比如 box-shadow，往左下角偏移一點(diǎn)就可以了
.excerpt::after{
????content:?'';
????position:?absolute;
????width:?999vh;
????height:?999vh;
????background:?#fff;
???box-shadow:?-2em?2em?#fff;?/*左下的陰影*/
}?
設(shè)置和底色相同的顏色后，最終的效果如下
這樣就實(shí)現(xiàn)了文章開頭某乎的交互效果，完整代碼可訪問(wèn) auto-clamp (codepen.io)[5]
四、總結(jié)和說(shuō)明
以上實(shí)現(xiàn)了一個(gè)不定行數(shù)的文本截?cái)嘈Ч?，融合了許多 CSS 小技巧，除了 shapes 布局以外（當(dāng)然也可以采用其他方式實(shí)現(xiàn)），沒(méi)有太多陌生的屬性，下面簡(jiǎn)單總結(jié)一下：
多行省略直接使用 -webkit-line-clamp，現(xiàn)代瀏覽器都支持 flex 布局可以很方便的處理剩余空間 float + shapes 布局也可以實(shí)現(xiàn)右下角環(huán)繞效果 box-shadow 在障眼法中很常見 適當(dāng)積累一些 CSS 奇技淫巧，有時(shí)候會(huì)幫上大忙
在我看來(lái)，布局的事情當(dāng)然最好由 CSS 解決，實(shí)現(xiàn)更靈活，渲染更迅速，沒(méi)有框架限制，無(wú)需等待 dom 加載，無(wú)需 JS 計(jì)算尺寸，無(wú)需遍歷節(jié)點(diǎn)，好處太多了。如果覺(jué)得還不錯(cuò)，對(duì)你有幫助的話，歡迎點(diǎn)贊、收藏、轉(zhuǎn)發(fā)???
參考資料
某乎熱榜頁(yè): https://www.zhihu.com/hot
[2]CSS 實(shí)現(xiàn)多行文本“展開收起” - 掘金 (juejin.cn): https://juejin.cn/post/6963904955262435336
[3]CSS shapes 布局: https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside
[4]寫給自己看的CSS shapes布局教程 ? 張?chǎng)涡?鑫空間-鑫生活 (zhangxinxu.com): https://www.zhangxinxu.com/wordpress/2019/02/css-css3-shapes/
[5]auto-clamp (codepen.io): https://codepen.io/xboxyan/pen/zYdozbv
后臺(tái)回復(fù)：typescript，獲取我寫的 typescript 系列文章，絕對(duì)精品 后臺(tái)回復(fù)：電子書，自動(dòng)獲取我為大家整理的大量經(jīng)典電子書，省去你篩選以及下載的時(shí)間 后臺(tái)回復(fù)：不一樣的前端，自動(dòng)獲取精選優(yōu)質(zhì)前端文章。 后臺(tái)回復(fù)：算法，自動(dòng)獲取精選算法文章。另外也可關(guān)注我的另外一個(gè)專注算法的公眾號(hào)力扣加加。 后臺(tái)回復(fù)：每日一薦，自動(dòng)獲取我為大家總結(jié)的每日一薦月刊，內(nèi)含精品文章，實(shí)用技巧，高效工具等等