嘗試借助CSS @container實現多行文本展開收起
之前寫過這樣一篇文章：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。
