[!info] related notes

• 所属 MOC: CSS MOC
• 上位主题: CSS 文本与视觉样式
• 实战场景: CSS 表单样式

文本溢出、省略与 line clamp

文本样式不只是字号和颜色，真实项目里更高频的问题往往是“内容太长怎么办”。

一句话主线

CSS 文本溢出处理的目标，是在有限空间里让文本保持可读、可控，不把布局冲坏。

单行省略

最常见写法：

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

这组属性通常一起出现。

它们分别在做什么

• overflow: hidden：超出部分不显示
• white-space: nowrap：不换行
• text-overflow: ellipsis：溢出时显示省略号

多行省略

常见写法：

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

怎么理解

它不是“标准块文本自动省略”的自然行为，而是依赖特定布局模式和裁剪方式实现的多行截断。

和换行控制的关系

常见相关属性还有：

• white-space
• word-break
• overflow-wrap

它们更多是在控制：

• 能不能换行
• 在哪里换行
• 超长单词或链接怎么断开

最短记忆方式

单行省略靠 nowrap + hidden + ellipsis；多行省略通常靠 line-clamp 方案。

Related notes

• CSS MOC