前端项目：小屏幕文本自动换行失效，需兼顾换行符显示

直接把原来设置的whiteSpace = "pre"改成whiteSpace = "pre-wrap"，就能同时满足两个需求：

• 保留文本中的\r\n换行符效果
• 当文本在小屏幕超出容器宽度时，自动换行

代码修改示例 #

修改JavaScript代码 #

把原来的：

kaart2.style.whiteSpace = "pre";

替换成：

kaart2.style.whiteSpace = "pre-wrap";

更推荐的方式：写在CSS里 #

直接在对应元素的CSS规则中添加，比通过JS设置样式更易维护：

#kaart2 { /* 假设元素id是kaart2 */
  white-space: pre-wrap;
  /* 其他已有样式 */
}

为什么这个方案可行？ #

• white-space: pre：严格保留文本中的空格、换行，但不会自动换行，超出容器会横向溢出，这就是你之前小屏幕不换行的原因
• white-space: pre-wrap：保留文本中的换行符，同时允许内容在容器边界处自动换行，完美匹配你的需求
• 另外还有white-space: pre-line，它也会保留换行符，但会合并连续的空格，如果你不需要保留多个连续空格，这个也可以用，但你的场景里pre-wrap更贴合原需求

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