本文介绍一种纯 CSS 方案：通过检测文本是否实际触发了 text-overflow: ellipsis（即内容被截断），在悬停时动态展开完整文本，避免在未截断时误触发显示——无需 JavaScript，语义清晰且兼容性良好。
本文介绍一种纯 css 方案：通过检测文本是否实际触发了 `text-overflow: ellipsis`（即内容被截断），在悬停时动态展开完整文本，避免在未截断时误触发显示——无需 javascript，语义清晰且兼容性良好。
在响应式布局中，常需对过长文本启用省略号（text-overflow: ellipsis），同时提供悬停查看全文的能力。但一个关键需求常被忽略：仅当文本真正被截断时才激活悬停行为；若容器足够宽、文本未溢出，就不应显示额外提示或展开内容——这既是用户体验的严谨性要求，也是语义合理性的体现。
遗憾的是，CSS 本身无法直接“检测”是否发生截断（浏览器不暴露 offsetWidth > scrollWidth 这类状态），因此不能用 :has() 或伪类直接判断省略状态。但我们可以利用一个可靠的行为特征实现等效效果：
✅ 核心思路：利用 white-space: nowrap 与 white-space: normal 的切换
- 默认强制单行 + 截断（nowrap + overflow: hidden + text-overflow: ellipsis）；
- 悬停时切换为 white-space: normal，让文本自然换行并撑开容器高度；
- 关键点：仅当原始文本宽度 > 容器宽度（即真实触发了省略）时，normal 才会导致视觉变化（如高度增加、内容可见）；若文本本就未溢出，normal 不会引起任何可观测变化，也就不会“意外显示”冗余信息。
以下为推荐实现方案：
立即学习“前端免费学习笔记（深入）”；
.container {
width: 200px; /* 触发省略的临界宽度 */
border: 1px solid #eee;
padding: 8px;
}
.ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin: 0;
/* 可选：添加平滑过渡增强体验 */
transition: white-space 0.2s ease;
}
.ellipsis:hover {
white-space: normal;
/* 可选：微调行高/间距提升可读性 */
line-height: 1.4;
}<div class="container">
<p class="ellipsis">
Long text that might overflow and produce an ellipsis.
Text that shows on ellipsis hover — only when needed.
</p>
</div>✅ 为什么此方案满足原始需求？
- 当 .container 宽度为 400px（足够容纳全文）时，.ellipsis 始终未触发 text-overflow，hover 切换 white-space 后文本仍完全可见，无视觉变化，第二段内容不会“出现”（因根本不存在独立的第二段元素）；
- 当宽度缩至 200px，首行被截断并显示 …，悬停后自动换行，完整内容自然呈现——效果等价于“仅在省略时显示全文”。
⚠️ 注意事项与最佳实践
-
不要拆分为两个
元素
：原问题中尝试用 .ellipsis + p 控制相邻段落显示，本质不可靠——CSS 无法感知前一个元素是否被截断，hover 总是生效，违背“按需显示”原则； - 避免固定高度限制：确保容器无 height 或 max-height 约束，否则 white-space: normal 可能被截断，导致内容不可见；
-
无障碍友好建议：为 .ellipsis 添加 title 属性（如
...），为键盘用户及屏幕阅读器提供备用访问路径；
- 现代增强（可选）：若需更精细控制（如 Tooltip 式浮层），可在支持 :has() 的浏览器（Chrome 105+、Safari 15.4+）中结合 :has(&:not(:nth-child(1))) 进行进阶判断，但当前方案已覆盖全平台主流场景。
该方法简洁、健壮、零 JS 依赖，是解决“条件性悬停展开”问题的 CSS 最佳实践之一。
