多行文本溢出显示省略号问题：现有CSS仅截断首行如何解决？

嘿，这个问题我之前踩过坑！你当前用的white-space: nowrap是强制文本单行显示，所以才会刚到第一行末尾就截断。要实现「文本填满多行容器后再显示省略号」的效果，得换一套CSS属性组合，具体方案如下：

核心解决方案（现代浏览器优先） #

这套方案在Chrome、Safari、Edge等主流浏览器里支持非常好，也是日常开发最常用的方式：

你需要给容器设置明确的宽度（或最大宽度），然后搭配以下CSS属性：

.multiline-ellipsis {
  /* 必须设置容器宽度，否则文本会无限换行不会触发溢出 */
  width: 300px; 
  /* 开启webkit弹性盒子布局 */
  display: -webkit-box;
  /* 指定最多显示的行数，比如这里设为3行 */
  -webkit-line-clamp: 3;
  /* 设置盒子内元素垂直排列 */
  -webkit-box-orient: vertical;
  /* 隐藏超出容器的内容 */
  overflow: hidden;
  /* 在溢出位置显示省略号 */
  text-overflow: ellipsis;
}

兼容性与降级方案 #

• 上述方案依赖webkit内核的私有属性，Firefox目前（2024年）还不原生支持-webkit-line-clamp。如果需要兼容Firefox，可以考虑用JavaScript动态计算文本高度判断是否溢出，或者用伪元素模拟省略号（不过伪元素方案会有一些排版细节需要调整）。
• 要是不需要兼容老旧浏览器，webkit的方案完全够用，毕竟现在绝大多数用户都在用支持该属性的浏览器。

关键注意点 #

• 务必给容器设置明确的宽度/最大宽度，否则容器会随文本自动扩展，永远不会触发溢出截断。
• -webkit-line-clamp的数值要和容器行高匹配，比如行高是1.5em，设置3行的话，容器高度大概在4.5em左右，刚好能容纳3行文本。

内容的提问来源于stack exchange，提问作者user5836372