如何在CSS中设置文本溢出处理_text-overflow隐藏超出内容

单行文本溢出需设置white-space:nowrap、overflow:hidden和text-overflow:ellipsis；多行则用-webkit-box和-webkit-line-clamp限制行数并加省略号；仅隐藏溢出内容可只设overflow:hidden。

当文本内容超出容器宽度时，可以通过CSS的 text-overflow 属性来控制如何显示溢出部分。常见做法是将超出的内容隐藏并用省略号（...）表示。要实现这一效果，需要结合几个关键属性一起使用。

1. 单行文本溢出隐藏加省略号

适用于只显示一行文本，超出部分以省略号结尾：

注意：必须配合 overflow: hidden 和 white-space: nowrap 才能生效。

text-overflow: ellipsis; 表示超出部分用省略号代替。

.text-ellipsis {
  white-space: nowrap;        /* 禁止换行 */
  overflow: hidden;           /* 超出部分隐藏 */
  text-overflow: ellipsis;    /* 显示省略号 */
  width: 200px;               /* 必须设定容器宽度 */
}

2. 多行文本溢出隐藏加省略号

CSS 原生的 text-overflow 不支持多行省略，但可以借助 -webkit-line-clamp 实现（兼容现代浏览器）：

.multi-line-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3;      /* 限制显示3行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
}

⚠️ 提示：-webkit-line-clamp 是 WebKit 特性，老旧IE不支持，但在移动端和主流桌面浏览器中广泛可用。

3. 隐藏溢出不显示省略号

如果只想简单裁剪掉超出内容，不需要任何标记：

.hide-overflow {
  overflow: hidden;
  width: 150px;
}

此时文本被截断，无省略号提示用户内容被隐藏。

基本上就这些常用方式，根据是否换行、是否需要提示来选择合适方案。