紅魔電競(jìng)平板評(píng)測(cè)：大屏幕硬實(shí)力
前言：三年的疫情因?yàn)橐暇W(wǎng)課的原因激活了平板市場(chǎng)，如今網(wǎng)課的時(shí)代已經(jīng)過(guò)去，大家的生活都恢復(fù)到了正軌，這也就意味著，真正考驗(yàn)平板電腦生存的環(huán)境來(lái)了。也就是面對(duì)著這種殘酷的
之前寫(xiě)過(guò)這樣一篇文章：CSS 實(shí)現(xiàn)多行文本“展開(kāi)收起”，介紹了一些純 CSS 實(shí)現(xiàn)多行文本展開(kāi)收起的小技巧，非常巧妙，有興趣的可以回顧一下。
不過(guò)展開(kāi)收起按鈕的隱藏和顯示采用了“障眼法”，也就是通過(guò)一個(gè)偽元素設(shè)置和背景相同的顏色覆蓋實(shí)現(xiàn)的，如下：
：時(shí)代在進(jìn)步，CSS也在不斷發(fā)展。 CSS 容器查詢(xún)[1]出來(lái)也有一段時(shí)間了，能夠動(dòng)態(tài)判斷容器尺寸，趕緊拿來(lái)用一下，發(fā)現(xiàn)并沒(méi)有想象中的那么順利，甚至還有些難用，一起看看吧
CSS 容器查詢(xún)，顧名思義，就是可以動(dòng)態(tài)查詢(xún)到容器的尺寸，然后設(shè)置不同的樣式。
比如有這樣一個(gè)容器。
<div class="card"> <h2>歡迎關(guān)注前端偵探</h2></div>簡(jiǎn)單美化一下。
.card{ display: grid; place-content: center; width: 350px; height: 200px; background-color: #FFE8A3; border-radius: 8px; border: 1px dashed #9747FF;}效果如下：
現(xiàn)在這個(gè)容器寬度是 350px，現(xiàn)在希望在寬度小于 250px時(shí)文字顏色變?yōu)榫G色，要怎么做呢？
非常簡(jiǎn)單，只需要規(guī)定一下容器的類(lèi)型，然后寫(xiě)一個(gè)查詢(xún)語(yǔ)句就行了，關(guān)鍵實(shí)現(xiàn)如下：
.card{ /**/ container-type: size;}@container (width < 250px){ .card h2{ color: #14AE5C; }}這樣在動(dòng)態(tài)改變?cè)爻叽鐣r(shí)就會(huì)自動(dòng)改變顏色了，效果如下
是不是非常簡(jiǎn)單？
可事實(shí)是這樣嗎，其實(shí)還有很多局限。
主要是有兩點(diǎn)局限。
第一點(diǎn)，容器查詢(xún)不可更改容器本身樣式，比如像這樣，直接改顏色是不生效的。
.card{ /**/ container-type: size;}@container (width < 250px){ .card{ color: #14AE5C; }}白白浪費(fèi)了一層標(biāo)簽。
也無(wú)法通過(guò):has去匹配父級(jí)。
.card{ /**/ container-type: size;}@container (width < 250px){ body:has(.card h2){ color: #14AE5C; }}還有一點(diǎn)問(wèn)題更大，容器必須手動(dòng)指明尺寸，不可以由內(nèi)容撐開(kāi)，也就是自適應(yīng)內(nèi)容尺寸，比如我們將上面的寬高去除
可以看到，在設(shè)置成容器查詢(xún)類(lèi)型后，「容器的寬高都變成了 0」，必須手動(dòng)設(shè)置寬高。
所以，在實(shí)際應(yīng)用中，必須要想辦法規(guī)避這兩個(gè)問(wèn)題。
現(xiàn)在回頭看多行文本的例子，通過(guò)之前的文章，我們可以很“輕松”的實(shí)現(xiàn)這樣一個(gè)布局，如果不太清楚的可以回顧一下，這里就不多描述了
<div class="text-wrap"> <div class="text-content"> <label class="expand"><input type="checkbox" hidden></label> 歡迎關(guān)注前端偵探，這里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧。 </div></div>相關(guān)樣式如下：
.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: '展開(kāi)';}.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: '收起';}這樣就得到了一個(gè)“右下角”可以展開(kāi)收起的布局，不過(guò)目前按鈕是始終可見(jiàn)的。
我們嘗試用容器查詢(xún)來(lái)判斷一下：
.text-wrap{ /**/ container-type: size;}結(jié)果...高度都變成了 0。
所以直接添加是不行的。
有什么辦法可以讓容器查詢(xún)可以自適應(yīng)內(nèi)容高度呢？我這里想到的辦法是，外層用一個(gè)自適應(yīng)內(nèi)容高度的容器，然后容器查詢(xún)盒子用絕對(duì)定位的方式，高度跟隨外層，原理如下：
因此，我們需要添加兩層，一層作為自適應(yīng)內(nèi)容的容器，一層作為容器查詢(xún)盒子，自適應(yīng)內(nèi)容的文本可以用偽元素來(lái)代替，和真實(shí)內(nèi)容保持一致就行了。
<div class="text-wrap"> <div class="text" title="歡迎關(guān)注前端偵探，這里有一些有趣的、你可能不知道的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> 歡迎關(guān)注前端偵探，這里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧。 </div> </div> </div> </div> </div>然后把.text-size座位容器查詢(xún)盒子。
.text-size{ position: absolute; inset: 0; container-type: size;}@container (height <= 4.5em) { .text-size .expand{ display: none; }}雖然現(xiàn)在有點(diǎn)亂，但容器查詢(xún)已經(jīng)生效了，在小于等于4.5em（3行）的時(shí)候，右下角按鈕已經(jīng)消失了。
如果隱藏占位偽元素，其實(shí)是這樣的。
空出一大段空白確實(shí)不雅，由于我們需要查詢(xún)的高度是最大高度，所以外層自適應(yīng)高度不能再變了，相當(dāng)于 JS 中的 scrollHeight，因此，這層容器需要設(shè)置絕對(duì)定位，從而不影響最外層容器。
.text{ position: absolute}同時(shí)將占位偽元素隱藏后，效果如下：
現(xiàn)在高度都回到了0，因此我們需要額外一份文本來(lái)自適應(yīng)最外層容器，而且也能展開(kāi)收起。
<div class="text-wrap"> <div class="text" title="歡迎關(guān)注前端偵探，這里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧。"> <div class="text-size"> <div class="text-flex"> <div class="text-content"> <label class="expand"><input type="checkbox" hidden></label> 歡迎關(guān)注前端偵探，這里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧。 </div> </div> </div> </div> <div class="text-content text-place"> 歡迎關(guān)注前端偵探，這里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧。 </div></div>我們只需要它的高度，所以可以設(shè)置為不可見(jiàn)。
.text-place{ visibility: hidden;}這樣容器的高度其實(shí)是由text-place這一層撐開(kāi)的，效果如下：
總算實(shí)現(xiàn)了動(dòng)態(tài)查詢(xún)自適應(yīng)文本容器高度，效果如下：
還有很多細(xì)節(jié)，可以查看以下 demo。
總的來(lái)說(shuō)，容器查詢(xún)并沒(méi)有想象中那么“好用”，甚至有些難用，也有可能使用過(guò)場(chǎng)景并不在這里，雖然最終勉強(qiáng)實(shí)現(xiàn)了，但是代價(jià)太大了，多了兩份相同的文本內(nèi)容，HTML結(jié)構(gòu)也復(fù)雜了好多。下面總結(jié)一下
僅僅作為嘗試，實(shí)際并不推薦，最終結(jié)構(gòu)還是過(guò)于復(fù)雜，3份相同的內(nèi)容有些過(guò)于冗余，其實(shí)HTML結(jié)構(gòu)實(shí)現(xiàn)到右下角按鈕那里就可以了，動(dòng)態(tài)高度還是交給 JS去判斷吧。
[1]容器查詢(xún)： 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實(shí)現(xiàn)多行文本展開(kāi)收起
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)