CSS 文字截断完全指南, 多行省略号怎么写才稳

做卡片列表的时候, 标题长短不一是常态。有的两个字, 有的四十个字。如果不处理, 长标题会把卡片撑得忽高忽低, 整行网格立刻就歪了。解决办法是把文字截断到固定行数, 超出的部分用省略号收尾。这件事看着简单, 真正写对却有几个绕不过去的坑。这篇把多行截断和单行截断都讲清楚, 给你一段能直接抄的 CSS。

多行截断的核心: -webkit-line-clamp

多行截断的主力写法是 WebKit 的盒子模式。它需要四条声明配合, 缺一条就不生效:

.clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3;
}

这里 -webkit-line-clamp: N 是控制行数的关键, 想截几行就把 N 写成几。display: -webkit-box 和 -webkit-box-orient: vertical 一起把元素切成纵向排列的盒子, overflow: hidden 负责把超出行数的内容藏起来并触发那个省略号。把上面这段放到一个有固定宽度的元素上, 第四行开始的文字就会被替换成一个点点点。

别被 -webkit- 前缀吓到。虽然名字里带它, 但 Chrome、Edge、Safari、Firefox 还有各家手机浏览器都实现了这套行为, 放生产环境完全没问题。想更稳妥, 可以在旁边再补一条不带前缀的标准属性 line-clamp: 3, 新引擎认这条干净的, 老引擎退回前缀版, 新旧一次盖全。

一段真实的三行截断例子

假设你在做一个博客信息流, 每张卡片有标题和一段摘要, 摘要最多显示三行。完整写法是这样:

.card-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  max-width: 320px;
}

注意我加了 max-width: 320px。这一行不是可选项, 没有宽度约束文字根本不换行, 也就没有第四行可截, 你会发现省略号永远不出现。一段一百二十字的摘要套上这段样式, 就会在第三行末尾收成省略号, 后面的内容干净地藏起来。如果你想换成两行, 把两处的 3 都改成 2 即可。需要在线试不同行数并直接拿到现成代码, 可以用 CSS 多行截断生成器, 它会按你填的行数把整段写好, 还带实时预览, 一眼看清截在哪。

单行场景: 别用盒子, 用 text-overflow

不是所有截断都需要多行盒子。如果你只想要一行, 比如文件名、标签、表格单元格, 那套更轻的写法更合适:

.cell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

white-space: nowrap 强制不换行, text-overflow: ellipsis 在被裁掉的地方补省略号。这套完全不碰弹性盒子, 比 -webkit-box 更稳, 也不会跟内边距或 inline 子元素打架。一列邮件主题用它, 每个单元格都规规矩矩一行高, 过长的才带点点点。记住一句话: 只要一行就别上 -webkit-box, 那是给多行准备的。

我自己踩过的两个坑

我第一次写多行截断时, 复制别人代码只抄了 -webkit-line-clamp: 2 这一条, 结果文字纹丝不动。折腾半天才发现, 缺了 display: -webkit-box 和 overflow: hidden, 这四条是一个整体, 拆开任何一条都白搭。第二次是把这套样式放在了一个 display: inline 的 span 上, 同样不生效, 因为 inline 元素没有可供盒子排版的块级上下文。后来养成习惯: 截断元素必须是块级、必须有宽度、四条声明一起复制, 从此再没翻过车。

响应式怎么处理

不同屏宽下想截不同行数也很常见。手机一行字短, 三行可能太占地方, 截两行更利落; 桌面宽, 三到四行才撑得起。直接用媒体查询覆盖 line-clamp 的值就行:

.card-summary { -webkit-line-clamp: 2; }
@media (min-width: 768px) {
  .card-summary { -webkit-line-clamp: 3; }
}

如果你的项目用 Tailwind, 就更省事了。Tailwind 3.3 起把 line-clamp 收进核心, 直接写 line-clamp-2 md:line-clamp-3 就能在断点切换行数, 完全不用手写前缀。配合统一的间距和字号体系做卡片时, 也建议顺手用 CSS 代码格式化工具 把这些规则理整齐, 团队读起来不费劲。

小结

多行截断认准 -webkit-line-clamp 加那四条声明, 必须给宽度、必须块级; 单行截断改用 text-overflow: ellipsis 那套, 更轻更稳; 响应式靠媒体查询或 Tailwind 断点切换行数。把这几条记牢, 卡片列表再也不会因为一个超长标题而整排走样。

---

Made by Toolora · Updated 2026-06-13