列表标题太长撑破布局、文章摘要溢出容器——这是每个前端都遇到过的问题。用 CSS 让超长文本自动变成"省略号…"其实只需要几行代码，但单行和多行的写法完全不同，坑也不一样。本文一次讲清。

单行文本省略：三件套

单行省略是最经典的组合，三个属性缺一不可：

css ellipsis-single.css 
.title {
  white-space: nowrap;      /* 禁止换行 */
  overflow: hidden;         /* 溢出隐藏 */
  text-overflow: ellipsis;  /* 溢出部分显示省略号 */
}

原理很直白：文本不许换行，容器宽度固定，超出部分藏起来并用省略号标记。注意元素必须有确定的宽度（块级元素默认占满父宽即可）。

多行文本省略：line-clamp

想限制摘要只显示 2 行、3 行？用 -webkit-line-clamp：

css ellipsis-multi.css 
.summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;    /* 超过 3 行截断 */
  overflow: hidden;
}

四个属性是一套固定组合：display: -webkit-box 开启盒模型，box-orient: vertical 指定纵向排列，line-clamp 写最大行数。改行数只需要动 3 这个数字。

💡 好消息：这个写法虽然带 -webkit- 前缀，但如今 Chrome、Edge、Firefox、Safari 全支持，已成为事实标准。CSS Overflow Level 4 规范还收录了无前缀版本 line-clamp，Firefox 134+ 已支持。稳妥起见，两个都写：
css 兼容写法 
.summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;            /* 标准属性，新浏览器识别 */
  overflow: hidden;
}

三个常见的"不生效"坑

坑一：元素是行内元素

text-overflow 和 line-clamp 对 inline 元素（如 <span>、<a>）不生效。给一个 display: block 或 inline-block 即可。

坑二：flex 子元素溢出

这是最高频的坑：省略号在 flex 布局里突然失效。因为 flex 子项默认 min-width: auto，内容再长也不肯收缩。必须手动加：

css flex-fix.css 
.row {
  display: flex;
}
.row .title {
  flex: 1;
  min-width: 0;   /* ★ 关键：允许子项收缩到内容宽度以下 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

坑三：line-clamp 和别的 display 冲突

-webkit-box 是一种古老的盒模型，和 flex / grid 不能共存。如果元素本身已经是 flex 容器，把省略样式下移到内部的文本节点上。

让省略号里藏着完整内容

截断后用户看不到全文，体验上应补一个悬停提示，纯 HTML 就能做：

html tooltip.html 
<div class="title" title="完整标题内容写在这里">
  这是一段很长很长可能会被截断的标题文字
</div>
ℹ️
进阶提示
需要更精致的气泡提示时，可用 data-tip 属性 + CSS ::after 伪元素自制 tooltip，无需 JS。

速查表

场景方案核心属性
单行截断三件套nowrap + hidden + ellipsis
多行截断line-clamp-webkit-box + line-clamp: N
flex 内失效补一行min-width: 0
inline 元素改 displayinline-block / block

总结

单行用三件套，多行用 line-clamp，flex 里记得 min-width: 0——这三句话覆盖了 95% 的文本溢出场景。剩下的 5%，多半是忘了给元素定宽度。

把截断交给 CSS，把完整内容交给 title 属性。用户要多少，都能拿到多少。