文字溢出

处理内容超出容器时的截断与省略。

单行省略

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

三个条件缺一不可：

• white-space: nowrap：禁止换行
• overflow: hidden：裁切溢出
• text-overflow: ellipsis：溢出处显示省略号

元素还需要有明确的宽度约束（定宽、max-width，或处于会限制宽度的布局中），否则不会触发溢出。

多行省略

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

也可用标准属性 line-clamp（与 -webkit-line-clamp 对应，兼容性需自行确认）：

.text {
  overflow: hidden;
  line-clamp: 2;
}

注意：

• 行数由 -webkit-line-clamp / line-clamp 控制。
• 必须有 overflow: hidden，截断才生效。
• 多行方案会改变 display，可能影响原有布局（如原是 flex / inline）。

常见坑

Flex / Grid 子项撑开容器

子项默认 min-width: auto，可能无法收缩，省略不生效：

.item {
  min-width: 0; /* 或 overflow: hidden */
}

行内元素

text-overflow 对行内元素无效，需改为块级或行内块：

.text {
  display: block; /* 或 inline-block */
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}