嘿，我懂你碰到的问题了——你之前用的white-space: nowrap正是导致只能单行省略的关键！这个属性会强制文本不换行，哪怕你设了固定高度，也没法实现多行溢出的效果。下面给你两种靠谱的解决方案：

一、现代浏览器首选方案（WebKit内核通用） #

这个方案简洁高效，Chrome、Safari、Edge这些主流浏览器都支持，代码也很直观：

.text-multiline-ellipsis {
  /* 指定要显示的行数，比如这里设为3行 */
  -webkit-line-clamp: 3;
  /* 必须设置为弹性盒布局，配合下面的垂直排列 */
  display: -webkit-box;
  /* 让内容垂直排列，才能按行数截断 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 可选：用行高+最大高度控制整体区域，比如行高20px，3行就是60px，和你之前的height对应 */
  line-height: 20px;
  max-height: 60px;
}

关键说明： #

• -webkit-line-clamp是核心属性，直接定义要保留的行数
• display: -webkit-box和-webkit-box-orient: vertical是配套属性，缺一不可，用来让元素变成垂直排列的弹性盒，这样才能按行数截断文本
• 用max-height替代固定height会更灵活，能自适应不同行高的场景

二、兼容旧版非WebKit浏览器的 fallback 方案 #

如果需要兼容比如旧版Firefox这类不支持-webkit-line-clamp的浏览器，可以用伪元素模拟省略号效果：

.text-multiline-ellipsis-fallback {
  position: relative;
  overflow: hidden;
  line-height: 20px;
  max-height: 60px; /* 对应3行的高度 */
  padding-right: 1em; /* 给省略号预留空间，避免和最后一个字重叠 */
}

.text-multiline-ellipsis-fallback::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff; /* 必须和文本所在容器的背景色一致，才能盖住后面的文字 */
  padding-left: 0.5em;
}

注意事项： #

• 这个方案依赖纯色背景，否则伪元素的背景会和后面的内容冲突
• 它没法自动判断文本是否真的溢出——哪怕文本没超过指定行数，也会显示省略号。如果要更精准，建议配合JavaScript判断内容高度后，再动态添加这个类名

再唠唠你原来的代码问题 #

回头看你写的代码：

height: 60px; 
overflow: hidden; 
white-space: nowrap; /* 就是这个属性！强制文本单行显示，自然没法多行省略 */
text-overflow: ellipsis;

white-space: nowrap会把所有文本强制挤在一行里，哪怕高度足够容纳多行，也不会换行。去掉这个属性，换成上面的多行方案，就能达到你想要的效果啦。

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