white-space: pre-wrap 是最直接有效的选择，它原样渲染换行符和空格，同时允许自动折行，但必须配合 max-width 和溢出控制才能防止文字逃逸。

white-space: pre-wrap 是最直接有效的选择

后端返回的字符串里带 \n，想让它在页面上真实换行，又不撑破容器——white-space: pre-wrap 就是为此设计的。它不做任何格式“矫正”，原样渲染换行符和空格，同时允许在空格、制表符或换行符处自动折行。

常见错误现象：white-space: pre 一用就横向滚动，尤其在手机上；white-space: normal 一设，\n 全被吃掉，变成一行平铺。

• 必须配合 max-width 或 width，否则换行点无法触发（浏览器不知道“多宽该换”）
• 建议加 overflow-wrap: break-word，防止单个超长无空格字符串（如 base64 或 URL）溢出
• text-overflow: ellipsis 和 pre-wrap 不兼容，别一起用

pre-line 和 pre-wrap 的关键区别在哪

两者都保留 \n 并允许自动换行，但对空格的处理逻辑相反：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• pre-wrap：保留所有空格序列（包括行首缩进、连续多个空格），适合展示代码片段、富文本导出内容或需严格还原格式的场景
• pre-line：把连续空格/制表符压缩成一个空格，只留换行符，适合用户评论、消息摘要等“语义优先、格式次要”的场景
• 若后端返回的是 " 第一段。\n\n 第二段。"（带缩进），用 pre-wrap 缩进可见；用 pre-line 行首空格会被抹掉

为什么单独写 white-space 不够用

white-space 只管“空白怎么解析”，不管“超出容器怎么办”。哪怕用了 pre-wrap，如果容器没设宽度、也没控制溢出，结果仍是文字逃逸或触发横向滚动条。

立即学习“前端免费学习笔记（深入）”；

• 必须显式设置 max-width（响应式推荐用 max-width: 100%）
• 加 overflow: hidden 或 overflow: auto 明确溢出行为，避免意外布局偏移
• 若文本含大量 Word 粘贴来的无意义空格或  ，CSS 无法清洗——得在 JS 层做 str.replace(/\s+/g, ' ').trim() 类处理，而不是靠样式硬扛

IE 兼容性和现代替代方案

pre-wrap 在 IE9+ 原生支持，无需前缀；IE8 及更早版本不支持，但已基本退出主流场景。真要兼容旧环境，可用降级方案：

• 用 <pre> 标签包裹文本，再通过 CSS 重置字体、margin、padding（注意它默认用 font-family: monospace）
• JS 替换换行符：

  text.replace(/\n/g, '<br>')

  ，配合 white-space: normal，但会丢失空格语义
• break-spaces 是新值（Chrome 83+、Firefox 78+），比 pre-wrap 更激进——连行尾空格都保留且可换行，但兼容性差，暂不推荐用于生产

实际最常踩的坑，是以为设了 white-space: pre-wrap 就万事大吉，忘了容器宽度和溢出控制这两步。它们不是“可选优化”，而是生效前提。