介绍一个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。
本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-86215-0.html纯 CSS 检测文本是否溢出
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号
