當前位置：首頁 > 科技 > 軟件

嘗試借助CSS @container實現多行文本展開收起

來源：責編：時間：2023-12-18 09:46:36 232觀看

導讀之前寫過這樣一篇文章：CSS 實現多行文本“展開收起”，介紹了一些純 CSS 實現多行文本展開收起的小技巧，非常巧妙，有興趣的可以回顧一下。不過展開收起按鈕的隱藏和顯示采用了“障眼法”，也就是通過一個偽元素設置和背景相

之前寫過這樣一篇文章：CSS 實現多行文本“展開收起”，介紹了一些純 CSS 實現多行文本展開收起的小技巧，非常巧妙，有興趣的可以回顧一下。

不過展開收起按鈕的隱藏和顯示采用了“障眼法”，也就是通過一個偽元素設置和背景相同的顏色覆蓋實現的，如下：

：時代在進步，CSS也在不斷發展。 CSS 容器查詢[1]出來也有一段時間了，能夠動態判斷容器尺寸，趕緊拿來用一下，發現并沒有想象中的那么順利，甚至還有些難用，一起看看吧

一、簡單介紹一下容器查詢

CSS 容器查詢，顧名思義，就是可以動態查詢到容器的尺寸，然后設置不同的樣式。

比如有這樣一個容器。

<div class="card">  <h2>歡迎關注前端偵探</h2></div>

簡單美化一下。

.card{  display: grid;  place-content: center;  width: 350px;  height: 200px;  background-color: #FFE8A3;  border-radius: 8px;  border: 1px dashed #9747FF;}

效果如下：

現在這個容器寬度是 350px，現在希望在寬度小于 250px時文字顏色變為綠色，要怎么做呢？

非常簡單，只需要規定一下容器的類型，然后寫一個查詢語句就行了，關鍵實現如下：

.card{  /**/  container-type: size;}@container (width < 250px){  .card h2{    color: #14AE5C;  }}

這樣在動態改變元素尺寸時就會自動改變顏色了，效果如下

是不是非常簡單？

可事實是這樣嗎，其實還有很多局限。

二、容器查詢的局限

主要是有兩點局限。

第一點，容器查詢不可更改容器本身樣式，比如像這樣，直接改顏色是不生效的。

.card{  /**/  container-type: size;}@container (width < 250px){  .card{    color: #14AE5C;  }}

白白浪費了一層標簽。

也無法通過:has去匹配父級。

.card{  /**/  container-type: size;}@container (width < 250px){  body:has(.card h2){    color: #14AE5C;  }}

還有一點問題更大，容器必須手動指明尺寸，不可以由內容撐開，也就是自適應內容尺寸，比如我們將上面的寬高去除

可以看到，在設置成容器查詢類型后，「容器的寬高都變成了 0」，必須手動設置寬高。

所以，在實際應用中，必須要想辦法規避這兩個問題。

三、多行文本展開收起中的應用

現在回頭看多行文本的例子，通過之前的文章，我們可以很“輕松”的實現這樣一個布局，如果不太清楚的可以回顧一下，這里就不多描述了

<div class="text-wrap">  <div class="text-content">    <label class="expand"><input type="checkbox" hidden></label>    歡迎關注前端偵探，這里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧。  </div></div>

相關樣式如下：

.text-wrap{  display: flex;  position: relative;  width: 300px;  padding: 8px;  outline: 1px dashed #9747FF;  border-radius: 4px;  line-height: 1.5;  text-align: justify;  font-family: cursive;}.expand{  font-size: 80%;  padding: .2em .5em;  background-color: #9747FF;  color: #fff;  border-radius: 4px;  cursor: pointer;}.expand::after{  content: '展開';}.text-content{  display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 3;  overflow: hidden;}.text-content::before{  content: '';  float: right;  height: calc(100% - 24px);}.expand{  float: right;  clear: both;  position: relative;}.text-wrap:has(:checked) .text-content{  -webkit-line-clamp: 999;}.text-wrap:has(:checked) .expand::after{  content: '收起';}

這樣就得到了一個“右下角”可以展開收起的布局，不過目前按鈕是始終可見的。

我們嘗試用容器查詢來判斷一下：

.text-wrap{  /**/  container-type: size;}

結果...高度都變成了 0。

所以直接添加是不行的。

有什么辦法可以讓容器查詢可以自適應內容高度呢？我這里想到的辦法是，外層用一個自適應內容高度的容器，然后容器查詢盒子用絕對定位的方式，高度跟隨外層，原理如下：

因此，我們需要添加兩層，一層作為自適應內容的容器，一層作為容器查詢盒子，自適應內容的文本可以用偽元素來代替，和真實內容保持一致就行了。

<div class="text-wrap">    <div class="text" title="歡迎關注前端偵探，這里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧。">      <div class="text-size">        <div class="text-flex">          <div class="text-content">            <label for="check" class="expand"><input type="checkbox" id="check" hidden></label>            歡迎關注前端偵探，這里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧。          </div>        </div>      </div>    </div>  </div>

然后把.text-size座位容器查詢盒子。

.text-size{  position: absolute;  inset: 0;  container-type: size;}@container (height <= 4.5em) {  .text-size .expand{    display: none;  }}

雖然現在有點亂，但容器查詢已經生效了，在小于等于4.5em（3行）的時候，右下角按鈕已經消失了。

如果隱藏占位偽元素，其實是這樣的。

空出一大段空白確實不雅，由于我們需要查詢的高度是最大高度，所以外層自適應高度不能再變了，相當于 JS 中的 scrollHeight，因此，這層容器需要設置絕對定位，從而不影響最外層容器。

.text{  position: absolute}

同時將占位偽元素隱藏后，效果如下：

現在高度都回到了0，因此我們需要額外一份文本來自適應最外層容器，而且也能展開收起。

<div class="text-wrap">  <div class="text" title="歡迎關注前端偵探，這里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧。">    <div class="text-size">      <div class="text-flex">        <div class="text-content">          <label class="expand"><input type="checkbox" hidden></label>          歡迎關注前端偵探，這里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧。        </div>      </div>    </div>  </div>  <div class="text-content text-place">    歡迎關注前端偵探，這里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧。  </div></div>

我們只需要它的高度，所以可以設置為不可見。

.text-place{  visibility: hidden;}

這樣容器的高度其實是由text-place這一層撐開的，效果如下：

總算實現了動態查詢自適應文本容器高度，效果如下：

還有很多細節，可以查看以下 demo。

CSS @container clamp (juejin.cn)[2]
CSS @container clamp (codepen.io)[3]

四、總結：容器查詢還是不太適合

總的來說，容器查詢并沒有想象中那么“好用”，甚至有些難用，也有可能使用過場景并不在這里，雖然最終勉強實現了，但是代價太大了，多了兩份相同的文本內容，HTML結構也復雜了好多。下面總結一下

容器查詢可以根據容器的尺寸匹配不同的樣式。
容器查詢并沒有那么“好用”，有兩個局限性。
一個是容器查詢不可更改容器本身樣式，導致白白浪費一層標簽。
還有一個是容器必須手動指明尺寸，不可以由內容撐開，也就是自適應內容尺寸，否則容器尺寸就是 0。
為了規避容器查詢的局限性，使用一層額外的文本充當容器查詢。
使用另一層額外的文本來撐開最外層容器。

僅僅作為嘗試，實際并不推薦，最終結構還是過于復雜，3份相同的內容有些過于冗余，其實HTML結構實現到右下角按鈕那里就可以了，動態高度還是交給 JS去判斷吧。

[1]容器查詢： https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Container_Queries。

[2]CSS @container clamp (juejin.cn)： https://code.juejin.cn/pen/7312418754502066214。

[3]CSS @container clamp (codepen.io)： https://codepen.io/xboxyan/pen/oNmRbvR。

本文鏈接：http://www.www897cc.com/showinfo-26-48343-0.html嘗試借助CSS @container實現多行文本展開收起

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇：為什么不建議交付靜態鏈接的可執行文件給用戶？

下一篇：使用 Sidecar CRD 優化 Istio 性能

標簽：

熱門焦點

石頭智能洗地機A10 Plus體驗：雙向自清潔治好了我的懶癌

一、前言和介紹專為家庭請假懶人而生的石頭科技在近日又帶來了自己的全新旗艦新品，石頭智能洗地機A10 Plus。從這個產品名上就不難看出，這次石頭推出的并不是常見的掃地機器
5月iOS設備好評榜：iPhone 14僅排第43？

來到新的一月，安兔兔的各個榜單又重新匯總了數據，像安卓陣營的榜單都有著比較大的變動，不過iOS由于設備的更新換代并沒有那么快，所以相對來說變化并不大，特別是iOS好評榜，老款設
容量越大越不壞？24萬塊硬盤故障率報告公布這些產品零故障

8月5日消息，云存儲服務商Backblaze發布了最新的硬盤故障率報告，年故障率有所上升。Backblaze發布的硬盤季度統計數據，其中包括故障率等重要方面。這些結
iPhone賣不動了！蘋果股價創年內最大日跌幅：市值一夜蒸發萬億元

8月5日消息，今天凌晨美股三大指數高開低走集體收跌，道指跌0.41%；納指跌0.36%；標普500指數跌0.52%。熱門科技股也都變化極大，其中蘋果報181.99美元，跌4.8%，創
K6：面向開發人員的現代負載測試工具

K6 是一個開源負載測試工具，可以輕松編寫、運行和分析性能測試。它建立在 Go 和 JavaScript 之上，它被設計為功能強大、可擴展且易于使用。k6 可用于測試各種應用程序，包括 Web
一文搞定Java NIO，以及各種奇葩流

大家好，我是哪吒。很多朋友問我，如何才能學好IO流，對各種流的概念，云里霧里的，不求甚解。用到的時候，現百度，功能雖然實現了，但是為什么用這個？不知道。更別說效率問題了~下次再遇到，
每天一道面試題-CPU偽共享

前言：了不起：又到了每天一到面試題的時候了！學弟，最近學習的怎么樣啊了不起學弟：最近學習的還不錯，每天都在學習，每天都在進步！了不起：那你最近學習的什么呢？了不起學弟：最近在學習C
自研Exynos回歸！三星Galaxy S24系列將提供Exynos和驍龍雙版本

年初，全新的三星Galaxy S23系列發布，包含Galaxy S23、Galaxy S23+和Galaxy S23 Ultra三個版本，全系搭載超頻版驍龍8 Gen 2，雖同樣采用臺積電4nm工藝制
世界人工智能大會國際日開幕式活動在世博展覽館開啟

30日上午，世界人工智能大會國際日開幕式活動在世博展覽館開啟，聚集國際城市代表、重量級院士專家、國際創新企業代表，共同打造人工智能交流平臺。上海市副市

日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

嘗試借助CSS @container實現多行文本展開收起

一、簡單介紹一下容器查詢

二、容器查詢的局限

三、多行文本展開收起中的應用

四、總結：容器查詢還是不太適合

石頭智能洗地機A10 Plus體驗：雙向自清潔治好了我的懶癌

5月iOS設備好評榜：iPhone 14僅排第43？

容量越大越不壞？24萬塊硬盤故障率報告公布這些產品零故障

iPhone賣不動了！蘋果股價創年內最大日跌幅：市值一夜蒸發萬億元

K6：面向開發人員的現代負載測試工具

一文搞定Java NIO，以及各種奇葩流

每天一道面試題-CPU偽共享

自研Exynos回歸！三星Galaxy S24系列將提供Exynos和驍龍雙版本

世界人工智能大會國際日開幕式活動在世博展覽館開啟

最新推薦

猜你喜歡

熱門推薦

相關資訊