• 教程
• 文档

文本溢出容器是日常布局中最常见的视觉问题之一。本文基于 30-seconds-of-code 仓库中的 text-truncation.md 文档，系统讲解如何用纯 CSS 对单行与多行文本进行优雅截断：单行场景借助white-space、overflow与text-overflow三件套，多行场景则依赖-webkit-line-clamp配合弹性盒模型实现行数钳制。读完本文，你将掌握可直接复制运行的 CSS 截断代码、各属性的取值与边界条件，以及该技术在本仓库网站 UI 中的真实落地用法。

文本截断：为什么需要它

任何设计系统都离不开对文本溢出问题的控制：卡片标题过长、列表摘要文字超宽、导航栏条目空间有限……如果放任文本自由溢出，布局会被撑破，视觉层级也会被打乱。文本截断（text truncation）正是解决这一问题的标准工具——它既能限制文本占用的空间，又通过结尾的省略号（ellipsis，…）向用户传达"内容还有更多"的信号。

按应用场景，截断分为两类：

• 单行截断：将任意长度的文本限制在一行内，超出的部分以省略号收尾；
• 多行截断：将文本限制在指定行数内（如 2 行、3 行），并在最后一行末尾显示省略号。

这两种方案在 CSS 中的实现思路完全不同，下文分别展开。

单行文本截断：三个核心属性

单行截断是 CSS 中最经典的"三件套"组合。原文档 text-truncation.md 给出的完整实现如下：

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

三个属性各司其职，缺一不可：

[!NOTE]

要使这套方案生效，必须在元素或其父元素上设置固定的width。没有固定宽度时，块级元素默认占满可用宽度，文本不会被真正"挤出"容器，text-overflow也就无从触发。同理，display: inline-block或弹性布局中的收缩子项等场景也需要先保证元素拥有确定的可视宽度。

一个完整的可运行示例：

.card-title { width: 240px; /* 固定宽度，截断生效的前提 */ overflow: hidden; /* 隐藏溢出内容 */ white-space: nowrap; /* 禁止换行，强制单行 */ text-overflow: ellipsis; /* 溢出处以 … 收尾 */ }

除ellipsis外，text-overflow还支持clip（直接硬性裁剪、不加省略号）与自定义字符串（如'...'），其中clip是默认值。本仓库的 css 语言引用表 中为white-space: nowrap、text-overflow: ellipsis、overflow: hidden等属性均登记了指向 MDN 的权威文档链接，可作为查阅取值细节的入口。

单行截断的典型应用：固定高度与弹性布局中的限制

单行截断最常见的落地场景是标题、标签、按钮与导航项。当与固定高度容器搭配时，它还能防止内容在视觉上"跳行"破坏对齐；在弹性布局（flex）中，若子项被压缩，则往往需要配合min-width: 0才能让截断真正生效——这是"三件套"在实战中很容易踩到的隐藏坑。

多行文本截断：借助 -webkit-line-clamp

多行场景下，单行的"三件套"不再适用：text-overflow: ellipsis只作用于单行内联方向上的一次裁剪，无法在任意指定的行数末尾追加省略号。原文档明确指出，多行截断需要转向-webkit-line-clamp：

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

关键点拆解如下：

[!NOTE]

截至文档修订时间（2024-08），-webkit-line-clamp在 CSS 规范中仍处于working draft（工作草案）阶段，但已被绝大多数现代浏览器原生支持。上线前务必通过 caniuse.com 的 css-line-clamp 页面 核对你目标浏览器的最新支持情况。

行数参数怎么选

-webkit-line-clamp接受任意正整数。行数取值没有绝对标准，通常由设计稿的排版密度决定：列表标题常用 1～2 行，摘要/描述类文本常用 2～3 行。需要留意的是，该属性的实际效果还受line-height、字号与容器宽度共同影响——同样的3，在不同字体参数下占据的视觉高度并不相同。

仓库源码印证：本网站 UI 中的真实应用

该截断方案并非停留在文档层面的"纸上谈兵"——30-seconds-of-code 站点自身的界面样式就大量使用了同一套技术，源码是最好的佐证。

在 snippet 嵌入卡片的样式 中，标题与描述文本分别被钳制为 1 行与 2 行：

h4 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; /* 标题最多 1 行 */ overflow: hidden; } p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 描述最多 2 行 */ overflow: hidden; }

其注释也直接印证了意图："Apply a line clamp to the description text, so that it doesn't exceed 2 lines of text"（对描述文本应用行钳制，使其不超过 2 行）。在窄屏（max-width: 28rem）的响应式分支中，标题的行数限制被放宽到 2 行（同一文件 #L123-L126），描述则被完全隐藏——这展示了一个优秀的实践：行数与断点联动，随可用空间动态调整。

同样，在预览列表组件样式中，预览文本被钳制为 3 行：

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

从源码结构可以推断，这套display: -webkit-box+-webkit-box-orient: vertical+-webkit-line-clamp+overflow: hidden的组合，已成为本仓库处理卡片与列表文本截断的统一模式，你可以在实际项目中放心复用它。

实战决策清单

综合原文档与仓库实践，按以下顺序选择方案：

1. 只需一行、有固定宽度→ 使用white-space: nowrap+overflow: hidden+text-overflow: ellipsis三件套；
2. 需要限制行数（2 行及以上）→ 使用display: -webkit-box+-webkit-box-orient: vertical+-webkit-line-clamp+overflow: hidden；
3. 兼容性敏感→ 上线前在 caniuse 核对css-line-clamp支持矩阵，必要时为不支持的环境提供降级（如只隐藏溢出而不显示省略号）；
4. 响应式布局→ 参考本仓库源码，在不同断点下调整-webkit-line-clamp的行数取值，甚至在小屏隐藏次要文本。

两条通用的兜底原则：多行截断同样依赖确定的容器尺寸；若截断在弹性或网格布局中失效，优先排查是否缺少固定宽度或min-width: 0之类的约束。掌握这两组代码，你就能在任何项目中稳定控制文本的"最后一屏"。

延伸阅读

• 仓库根目录 README：了解 30-seconds-of-code 的完整 snippet 集合
• CSS 语言引用表：文中各属性（white-space: nowrap、text-overflow: ellipsis、overflow: hidden等）的权威文档入口
• layout 集合目录：该 snippet 在 CSS 布局分类中的位置
• JS 版字符串截断：当需求转向"按字符数/单词边界/语言环境截断字符串"时，可参考 JavaScript 侧的slice()与Intl.Segmenter方案

• 教程
• 文档