本文介绍如何通过纯 css 判断并响应文本是否触发了 text-overflow: ellipsis，仅在文本实际被截断时悬停显示完整内容，避免误触发；核心思路是利用 white-space 切换与容器尺寸感知，无需 javascript。
本文介绍如何通过纯 css 判断并响应文本是否触发了 text-overflow: ellipsis，仅在文本实际被截断时悬停显示完整内容，避免误触发；核心思路是利用 white-space 切换与容器尺寸感知，无需 javascript。
在 Web 开发中，为节省空间常对长文本启用省略号（ellipsis）——即设置 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;。但一个常见需求是：仅当文本确实被截断时，才在悬停时展示完整内容；若文本本就完全可见（如容器变宽），则不应触发任何交互。遗憾的是，CSS 本身无法直接“检测”是否发生溢出，因此需借助可预测的行为特征来间接实现。
✅ 正确思路：利用 white-space 切换实现条件性展开
原问题中尝试通过相邻选择器 .ellipsis:hover + p 控制第二段显示，但该方式无条件触发——只要鼠标移入第一段，无论是否省略都会显示第二段，违背“仅在省略时响应”的设计目标。
更优解是将补充信息内联到同一元素中，并通过悬停改变排版行为，使截断状态与交互效果强绑定：
.container {
width: 200px; /* 触发省略的临界宽度 */
border: 1px solid #ddd;
padding: 8px;
}
.ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* 悬停时取消强制单行，允许文本自然换行展示全部内容 */
.ellipsis:hover {
white-space: normal;
overflow: visible;
cursor: default;
}
<div class="container">
<p class="ellipsis">
Long text that might overflow and produce an ellipsis.
Text that shows on ellipsis hover — now seamlessly part of the same paragraph.
</p>
</div>
✅ 效果说明：
- 容器宽 200px 时，首行显示为 Long text that might overflow and...，悬停后自动换行，完整呈现所有文字；
- 若将 .container { width: 400px }，文本始终完全可见，white-space: nowrap 下无截断，悬停也不会引发视觉变化（因本就不需要展开）。
⚠️ 关键注意事项
-
不依赖 JavaScript，但有布局约束：此方案要求补充文案与主文本语义一体（如同一逻辑段落），不可拆分为独立 DOM 元素。若业务强需分离结构（如
...
detail
），则纯 CSS 无法可靠判断溢出状态——此时应使用 ResizeObserver 配合 getBoundingClientRect() 或 scrollWidth > clientWidth 检测。 - 避免意外换行破坏设计：.ellipsis:hover { white-space: normal } 可能导致长单词撑破容器。如需更精细控制，可添加 word-break: break-word 或 overflow-wrap: break-word。
-
无障碍友好性：对屏幕阅读器用户，建议补充 aria-live="polite" 或使用 /
语义化替代方案以兼顾可访问性。
✅ 总结
纯 CSS 无法直接查询“是否发生 text-overflow”，但可通过将交互效果与排版行为耦合（如 nowrap ↔ normal 切换）实现等效体验：只有当 nowrap 确实导致截断时，hover 改变 white-space 才会产生可见变化。这是一种符合 CSS 设计哲学的、轻量且可靠的渐进增强方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
