纯 css 无法真正检测溢出，:has() 仅基于 dom 结构和样式计算，不感知 scrollwidth 等几何状态；可行方案是结合预设类名、属性选择器与 js 动态标记实现近似判断。
`:has()` 无法直接检测“是否溢出”，但能间接判断子元素是否超出容器宽度
纯 CSS 没有 :overflow 或 :is-overflowing 这类伪类，:has() 本身也不感知几何状态（如滚动、裁剪、溢出）。它只基于 DOM 结构和样式计算（如 display、visibility），不读取布局后的真实尺寸。所以你不能写 :has(:overflowing)——这个选择器根本不存在。
但你可以绕过这个限制：如果溢出是由子元素宽度 > 容器宽度导致的，且子元素是块级、无换行、固定宽度（比如一长串无空格文本或内联元素），那可以用 :has() 配合 white-space: nowrap + 显式宽度控制来「模拟」检测逻辑：
- 给容器设
overflow: hidden和white-space: nowrap - 确保子内容是单行不可折行的内联/内联块（如
<span></span>） - 用
:has(> span:not(:nth-child(1)))不行——这跟溢出无关；真正可行的是：:has(> span:nth-child(1):not(:first-of-type))？也不对。 - 正确思路是：把“溢出”转化为“内容撑宽了容器”，再通过子元素是否触发了容器的
scrollWidth > clientWidth来反推——但这是 JS 才能拿到的值。
真正可用的 CSS 替代方案：用 min-width + :has() 判断子元素是否“被迫撑宽”
如果你能接受“溢出”被定义为“子元素宽度超过容器设定的最小安全宽度”，就可以用 :has() 做一次结构+样式的联合断言。例如：
.container {
width: 200px;
overflow: hidden;
}
.container:has(> .content[style*="width:"][style*="300px"]) {
background: #fee;
}
这显然不实用——没人会把宽度写在 style 属性里还硬编码匹配。更现实的做法是结合属性选择器与预设类名：
- 手动给可能溢出的内容加
class="likely-overflowing" - 用
.container:has(> .likely-overflowing)触发 fallback 样式（如加省略号、调小字体） - 或者用
:has(> span:not([data-truncated]))配合 JS 动态加 data 属性，形成闭环
注意：:has() 在 Safari 15.4+、Chrome 105+、Firefox 121+ 支持，但不支持在 @keyframes 或媒体查询中嵌套使用。
为什么不能依赖 text-overflow: ellipsis 自动触发伪类？
text-overflow: ellipsis 是渲染结果，不是可选中的状态。CSS 伪类无法监听“浏览器是否画出了省略号”，因为：
- 省略号是否显示取决于
width、white-space、overflow、text-overflow四者共同作用，且发生在 layout → paint 阶段 - 没有
:ellipsis-shown这样的伪类，就像没有:wrapped或:clipped - 即使你用
getComputedStyle(el).textOverflow在 JS 中读到"ellipsis"，也不能保证当前真的显示了省略号（比如容器宽刚好卡在临界点）
所以想靠纯 CSS 实现“内容溢出时自动加 tooltip 或 expand 按钮”，目前只能靠 JS 监听 ResizeObserver + el.scrollWidth > el.clientWidth。
最容易被忽略的边界情况：flex / grid 容器中的“伪溢出”
在 display: flex 或 grid 容器中，子项可能因 flex-shrink: 0 或 min-width: fit-content 而“视觉上溢出”，但 scrollWidth === clientWidth（因为父容器没设 overflow，内容只是跑出视口）。这时：
-
:has()依然无法捕获——它不看位置，只看树结构和静态样式 -
getBoundingClientRect()可能返回负x或超大width，但需注意transform、position: absolute等干扰 - 最稳的方式仍是：在关键节点加
resize+scroll监听，用el.checkVisibility({ threshold: 0 })判断是否在视口内（但这不是“溢出”，是“可见性”）
也就是说，所谓“CSS 检测溢出”，本质是个伪命题——浏览器不暴露这个状态，:has() 也无意填补这个缺口。能做的，只是用结构约定 + 样式约束 + JS 补位，凑出一个够用的近似解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
