紅魔電競平板評測：大屏幕硬實力
前言：三年的疫情因為要上網課的原因激活了平板市場，如今網課的時代已經過去，大家的生活都恢復到了正軌，這也就意味著，真正考驗平板電腦生存的環境來了。也就是面對著這種殘酷的
介紹一個CSS實用技巧
一直以來，CSS 都無法很好的檢測出一段文本是否溢出。但這又是一個非常普遍的需求，比如多行文本展開，展開按鈕只有在文本溢出的時候才出現。
可以看到隨著滾動，左邊文本的顏色也慢慢變化了。
接著激進一點，我們在動畫中把起始點都設置成一樣，這樣還沒開始滾動就自動變色了。
@keyframes check{ from,to { /*動畫起始點設置成相同*/ color: #9747FF; }}效果如下：
這樣即使還沒開始滾動，也能提前知道是否可滾動了。
然后，我們可以設置超出隱藏，也就是讓滾動容器“不能滾動”。
.txt{%20%20overflow:%20hidden;}效果如下：
也就是說這種情況下，CSS滾動驅動動畫仍然可以被觸發。嘗試了一下，只要不是overflow:visible，CSS都認為是“可滾動”的，即“溢出”狀態。
最后，我們將文本設置成超出顯示省略號。
.txt{%20%20display:%20-webkit-box;%20%20-webkit-box-orient:%20vertical;%20%20-webkit-line-clamp:%203;%20%20overflow:%20hidden;}效果如下：
是不是有點能區分文本是否溢出了？至少目前從文本顏色可以很好判斷。
當然，僅僅這樣是不夠，還需要更加自由，比如在超出時可以控制其他標簽的狀態，這就需要用到%20CSS%20樣式查詢了。
下面介紹一下CSS樣式查詢。
@container%20-%20CSS:%20Cascading%20Style%20Sheets%20|%20MDN%20(mozilla.org)[1]
CSS%20樣式查詢是容器查詢的一部分，從名稱也可以看出，它可以查詢元素的樣式，進而設置額外的樣式。
比如，我們要查詢顏色為紅色的容器，然后給子元素設置背景色為黑色，可以這樣。
<style>%20%20div{%20%20%20%20color:red;%20%20}%20%20@container%20style(color:%20red)%20{%20%20%20%20p%20{%20%20%20%20%20%20background:%20black;%20%20%20%20} }</style><div>%20%20<p>%20%20%20%20%20%20</p></div>有人可能會有疑問，為啥要設置子元素，直接設置本身不好嗎？其實是為了避免沖突，假設查詢到了color:red，然后你又設置了color:yellow，那瀏覽器該如何渲染呢？有點死循環了。所以為了避免這種情況，所有容器查詢都只能設置子元素樣式。
不過這種寫法目前還不支持，僅支持CSS變量的寫法，類似于這樣。
<style>%20%20div{%20%20%20%20--color:red;%20%20}%20%20@container%20style(--color:%20red)%20{%20%20%20%20p%20{%20%20%20%20%20%20background:%20black;%20%20%20%20} }</style><div>%20%20<p>%20%20%20%20%20%20</p></div>回到前面的例子，我們可以給文本加一個CSS變量，就叫做 --trunc吧，表示截斷。
.txt{%20%20--trunc:%20false;}然后在滾動驅動動畫中改變這個變量。
@keyframes%20check{%20%20from,to%20{%20%20%20%20%20/*動畫起始點設置成相同*/%20%20%20%20color:%20#9747FF;%20%20%20%20--trunc:%20true;%20%20}}這樣一來，滾動驅動動畫執行的時候，這個變量也被賦值了。
最后我們就可以查詢這個樣式，給子元素設置樣式了，這里我們就用偽元素代替。
@container%20style(--trunc:%20true)%20{%20%20.txt::after{%20%20%20%20content:%20'';%20%20%20%20position:%20absolute;%20%20%20%20inset:%202px;%20%20%20%20border:%201px%20solid%20red;%20%20}}這段代碼表示當查詢到--trunc:%20true的條件時，設置相應的樣式，這里是畫了一個紅色的邊框，效果如下：
是不是非常容易？
你也可以查看以下在線鏈接（注意兼容性，需要 Chrome%20115+，以下相同）：
有了這個作為區分，可做的事情就比較多了，下面來看幾個例子。
這已經是第四次用不同方式來實現這個效果了，前幾次的實現可以參考文章開頭部分。
這次來看新的實現方式。
首先還是把之前的結構拿過來，這些結構是為了實現右下角的“展開”按鈕必不可少的。
<div%20class="text-wrap">%20%20<div%20class="text-content">%20%20%20%20<label%20class="expand"><input%20type="checkbox"%20hidden></label>%20%20%20%20歡迎關注前端偵探，這里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧。%20%20</div></div>相關 CSS 如下：
.text-wrap{%20%20display:%20flex;%20%20position:%20relative;%20%20width:%20300px;%20%20padding:%208px;%20%20outline:%201px%20dashed%20#9747FF;%20%20border-radius:%204px;%20%20line-height:%201.5;%20%20text-align:%20justify;%20%20font-family:%20cursive;}.expand{%20%20font-size:%2080%;%20%20padding:%20.2em%20.5em;%20%20background-color:%20#9747FF;%20%20color:%20#fff;%20%20border-radius:%204px;%20%20cursor:%20pointer;%20%20float:%20right;%20%20clear:%20both;}.expand::after{%20%20content:%20'展開';}.text-content{%20%20display:%20-webkit-box;%20%20-webkit-box-orient:%20vertical;%20%20-webkit-line-clamp:%203;%20%20overflow:%20hidden;}.text-content::before{%20%20content:%20'';%20%20float:%20right;%20%20height:%20calc(100%%20-%2024px);}.text-wrap:has(:checked)%20.text-content{%20%20-webkit-line-clamp:%20999;}.text-wrap:has(:checked)%20.expand::after{%20%20content:%20'收起';}這時的效果是這樣的。
通過上一節的原理，我們通過滾動驅動動畫來判斷是否溢出，并使用CSS變量作為標識，然后利用樣式查詢來控制展開按鈕的顯示狀態，關鍵實現如下：
.expand{ /**/%20%20display:%20none;}.text-content{%20%20--trunc:%20false;%20%20animation:%20check%201s;%20%20animation-timeline:%20scroll(self);}@keyframes%20check{%20%20from,to%20{%20%20%20%20--trunc:%20true;%20%20}}@container%20style(--trunc:%20true)%20{%20%20.expand{%20%20%20%20display:%20initial;%20%20}}展開按鈕默認是隱藏的，這樣只有在文本溢出的時候才出現，效果如下：
效果出來了，不過在點擊展開后按鈕也跟著消失了。這是因為展開后，CSS檢測出這時沒有溢出，所以樣式查詢里的語句就不生效了，自然也就回到了之前的隱藏狀態。
要解決這個問題也很簡單，在展開的時候始終顯示按鈕就行了,用:checked可以判斷是否展開。
.text-wrap:has(:checked) .expand{ display: initial;}這樣就正常了，完美！
CSS方式的好處是監控是實時的，比如手動改變容器的寬度，也會自動顯示或者隱藏這個按鈕。
完整demo可以查看以下在線鏈接（ Chrome 115+）：
還有一個比較常見的需求，就是希望在文本出現省略號時，鼠標hover有tooltips提示，就像這樣。
原理和上面幾乎一致，我們一步步來看。
首先還是結構，沒什么特別的。
<div class="txt" data-title="這是一段可以自動出現tooltip的文本"> 這是一段可以自動出現tooltip的文本</div>這里加了一個data-title，是用來顯示氣泡的，通過偽元素content獲取屬性內容。
.txt{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 8px; outline: 1px dashed #9747FF; font-family: cursive; border-radius: 4px;}.txt::after{ content: attr(data-title); position: absolute; top: 0; width: fit-content; left: 50%; margin: auto; transform: translate(-50%,-100%); background-color: rgba(0,0,0,.6); padding: .3em 1em; border-radius: 4px; color: #fff; opacity: 0; visibility: hidden; transition: .2s .1s;}效果如下：
完整demo可以查看以下在線鏈接（ Chrome 115+）：
CSS 就是這么神奇，將兩個幾乎不相關的特性組合起來，就能實現完全不一樣的功能，這可是在其他語言中做不到的，簡單回顧一下CSS檢測代碼。
.content{ --trunc: false; animation: check 1s; animation-timeline: scroll(x self); /*注意溢出方向*/}@keyframes check{ from,to { --trunc: true; /*滾動驅動動畫*/ }}/*查詢溢出狀態*/@container style(--trunc: true) { }是不是非常容易，幾乎是無侵入式的，下面總結一下本文重點。
當然除了以上一些案例，還可以做的事情很多，比如以前有寫一篇判斷指定高度后就顯示折疊按鈕，也可以用這種方式來實現，幾乎所有與溢出相關的交互都可以純CSS完成。
至于兼容性，目前僅支持 chrome 115+，還是需要多等等，多多關注，說不定哪一天就能用上了呢，比如5年前推出的CSS scroll snap，現在幾乎可以愉快使用了，再也無需swiper.js這樣的庫了。
[1]@container - CSS: Cascading Style Sheets | MDN (mozilla.org)： https://developer.mozilla.org/en-US/docs/Web/CSS/@container。
[2]CSS animation-timeline + @ container style (codepen.io)： https://codepen.io/xboxyan/pen/jORrXBe。
[3]CSS animation-timeline + @ container style (juejin.cn)： https://code.juejin.cn/pen/7346120235966267427。
[4]CSS 實現多行文本“展開收起”： https://juejin.cn/post/6963904955262435336。
[5]CSS container style expand (codepen.io)： https://codepen.io/xboxyan/pen/qBwaaWW。
[6]CSS container style expand (juejin.cn)： https://code.juejin.cn/pen/7346120018578374694。
[7]CSS container style tooltip (codepen.io)： https://codepen.io/xboxyan/pen/oNOzzYb。
[8]CSS container style tooltip (juejin.cn)： https://code.juejin.cn/pen/7346125496281333814。
本文鏈接：http://www.tebozhan.com/showinfo-26-86215-0.html純 CSS 檢測文本是否溢出
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號