容器内文本溢出且格式丢失，如何保留格式并添加滚动条？

这问题我碰到过好多次了，其实两个核心CSS属性就能完美解决——既要保留文本原有格式，又要给容器添加滚动条避免溢出，咱们一步一步来：

1. 保留文本原有格式 #

文本格式被压缩（比如换行、空格消失），通常是因为浏览器默认会合并空白字符并自动换行。要让容器尊重文本的原始格式，只需给容器添加：

white-space: pre-wrap;

这个属性的作用是：

• 保留文本中的换行符、空格，不会把它们合并成单个空格
• 当内容超出容器宽度时，自动换行（不会让内容一直横向溢出）

如果你的文本里有超长单词或URL导致水平溢出，可以再加一句，强制长内容换行：

word-break: break-word;

2. 添加滚动条避免溢出 #

要让内容超出容器时显示滚动条，需要给容器设置最大高度和溢出属性：

max-height: 400px; /* 可根据你的布局需求调整数值 */
overflow-y: auto;

• max-height：限制容器的最大高度，当内容高度超过这个值时，才会触发滚动条
• overflow-y: auto：垂直方向内容溢出时自动显示滚动条，内容没超出时则隐藏滚动条（比overflow-y: scroll更美观）

整合到你的.container-card样式里 #

修改后的完整CSS示例：

.container-card {
  /* 你原有的card阴影等样式保留 */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  
  /* 新增的格式与滚动相关属性 */
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 400px;
  overflow-y: auto;
  padding: 1rem; /* 可选，给内容加内边距，避免文字贴容器边缘 */
}

这样设置后，你的span内容会完美保留原有格式，同时当内容超过容器最大高度时，会自动出现垂直滚动条，再也不会溢出容器啦！

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