17370845950

单行文本溢出需设置white-space: nowrap、overflow: hidden和text-overflow: ellipsis，并限定宽度；多行则使用-webkit-box、-webkit-line-clamp和-webkit-box-orient实现，适用于现代浏览器。

当文本内容超出容器宽度时，使用CSS实现溢出部分显示为省略号（...）是一种常见需求。这在标题、列表项或卡片组件中尤为实用。要正确实现这一效果，需要结合多个CSS属性协同工作。

单行文本溢出省略

适用于只允许显示一行的文本，超出部分以“...”表示。

• white-space: nowrap：强制文本不换行
• overflow: hidden：隐藏溢出内容
• text-overflow: ellipsis：溢出时显示省略号

示例代码：

.single-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px; /* 必须限定宽度 */
}

多行文本溢出省略

当希望限制文本显示为两行或三行时，标准的 text-overflow 不再适用，需借助 WebKit 特性。

• 文章摘要
• 商品描述
• 用户评论预览

示例代码（支持2行省略）：

.multi-line {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 控制行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 200px;
}

兼容性与注意事项

确保省略效果正常显示，需注意以下几点：

• 必须设置固定宽度或最大宽度（width 或 max-width）
• 块级元素更易控制，内联元素建议转为 inline-block 或 block
• 父容器不要设置过小的 height，避免遮挡文本
• ellipsis 只在英文和数字间有效，中文同样支持

基本上就这些，掌握这几个属性组合，就能应对大多数文本截断场景。