如何用纯 CSS 实现“仅当文本触发省略号时，悬停显示完整内容”-html教程-PHP中文网

本文介绍一种纯 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 最佳实践之一。