嘿，我太懂你的困扰了！你当前CSS里的white-space: pre就是导致水平溢出不换行的关键原因——这个属性会严格保留文本里的换行和空格，但完全不会让超出容器宽度的文本自动折行，所以长串文本就直接横向跑出去了。

不过别担心，我们可以调整CSS来同时满足你所有三个需求，下面是具体的解决方案：

完整CSS代码示例 #

.card-text {
  /* 替换原来的white-space: pre */
  white-space: pre-wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 实现多行溢出省略号的核心属性 */
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 这里设置你希望显示的最大行数，可按需调整 */
  -webkit-box-orient: vertical;
}

各属性作用拆解 #

• white-space: pre-wrap：完美兼顾了你的两个核心需求——既会尊重文本里的原始换行符（满足第一个预期），又能让超出容器宽度的文本自动折行（解决第三个问题），不会再出现横向溢出的情况。
• display: -webkit-box + -webkit-line-clamp + -webkit-box-orient：这三个属性组合是实现多行文本溢出显示省略号的关键，-webkit-line-clamp的值决定了最多显示多少行，超出的部分就会自动替换成省略号（满足第二个预期）。
• overflow: hidden和text-overflow: ellipsis：配合上面的属性，完成溢出内容的截断和省略号的渲染。

需求验证 #

1. 文本存在换行符时自动换行：✅ 完全保留，pre-wrap会识别原始换行符并正常换行
2. 垂直溢出时显示省略号：✅ 完美实现，超出指定行数后自动显示省略号
3. 水平溢出时自动换行：✅ 彻底解决，长文本会自动折行，不再横向溢出

兼容性说明 #

-webkit-line-clamp是WebKit内核的属性，Chrome、Safari、Edge等现代浏览器都支持。如果需要兼容Firefox等非WebKit浏览器，可以考虑用JavaScript来实现多行省略，但大部分业务场景下这个CSS方案已经足够好用了。

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