文本溢出、省略与 line clamp

CSS 中单行省略、多行省略和换行控制的常见写法，以及它们分别适合什么场景。

#concept #growing #css #frontend

[!info] related notes

所属 MOC: CSS MOC

上位主题: CSS 文本与视觉样式

实战场景: CSS 表单样式

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

一句话主线

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

最常见写法：

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

这组属性通常一起出现。

常见写法：

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

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

常见相关属性还有：

它们更多是在控制：

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