css 文本溢出显示省略号怎么办_text-overflow ellipsis 与 overflow hidden

text-overflow: ellipsis 仅对单行文本生效，需同时满足 white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis；多行截断须用 -webkit-line-clamp 配合 display: -webkit-box 和 -webkit-box-orient: vertical。

text-overflow: ellipsis 只对单行生效

很多人写了 text-overflow: ellipsis 却没效果，第一反应是“CSS 写错了”，其实大概率是忘了前提条件：它只在单行文本中起作用。多行文本必须用其他方式（比如 -webkit-line-clamp 或 JS 截断）。

生效的三个必要条件缺一不可：

• white-space: nowrap —— 强制不换行
• overflow: hidden —— 隐藏溢出内容（text-overflow 依赖它）
• text-overflow: ellipsis —— 触发省略号渲染

div {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

多行文本想用省略号得靠 -webkit-line-clamp

标准 CSS 没有原生多行 text-overflow，但现代浏览器（Chrome、Edge、Safari 16+、Firefox 120+）支持 -webkit-line-clamp，它是目前最稳妥的纯 CSS 多行截断方案。

注意它必须配合 display: -webkit-box 和 -webkit-box-orient: vertical 才能工作，且仅作用于块级元素（不能用于 inline 元素）：

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 显示 2 行 */
  overflow: hidden;
}

常见失效原因：

• 父容器没有固定高度或 max-height，导致布局未收敛
• 用了 flex 或 grid 布局但没设 align-items: flex-start，盒子模型被干扰
• Firefox 旧版本（-webkit-line-clamp，需降级处理

overflow: hidden 不只是“隐藏”，它会影响交互和可访问性

overflow: hidden 看似只是视觉裁剪，但它会切断所有溢出区域的事件捕获（比如鼠标悬停、焦点进入），也会让屏幕阅

如果需要保留可访问性或交互能力，考虑替代方案：

• 用 aria-label 或 title 属性提供完整文本（title 在 hover 时显示原生提示，但移动端无效）
• 监听 resize 或用 ResizeObserver 动态判断是否溢出，再添加省略号类名
• 服务端或 JS 预计算字数 + 字宽（如用 canvas.measureText），主动截断并加 …

line-height 和 font-size 会影响省略号垂直居中效果

省略号不是“画上去”的，而是真实字符（U+2026），它的基线位置由当前字体决定。当 line-height 过大或字体不一致时，省略号可能看起来“上浮”或“下沉”。

调试建议：

• 确保 line-height 是无单位数值（如 1.4），避免与 font-size 计算冲突
• 不要混用不同字体族（尤其 Web Font 加载中 fallback 字体不同），否则省略号渲染位置可能突变
• 用 vertical-align: baseline（默认值）保持一致性；若强制居中，优先调 line-height 匹配容器高度，而非用 transform 微调

真正难的不是写对这三行 CSS，而是判断什么时候不该用它——比如用户需要复制全文、支持翻译、或内容长度波动极大时，硬截断反而破坏体验。