HTML中换行符被忽略是因为浏览器默认将连续空白字符（含换行、制表、空格）压缩为一个空格；需用white-space属性（如pre-wrap）或控制换行，选择依据是内容性质——结构用语义化标签，纯文本用pre-wrap，代码片段可选pre。
HTML 中换行符为什么被忽略
浏览器默认把连续空白字符（包括换行、制表、多个空格）压缩成一个空格，所以写在 HTML 源码里的回车不会变成视觉上的换行。<p>第一行↵第二行</p> 渲染出来就是“第一行第二行”连在一起。
white-space 属性怎么选
控制换行行为的关键是 CSS 的 white-space，不同值效果差异明显：
-
white-space: normal：默认值，换行符和空格都被折叠 -
white-space: pre：保留所有空白，但不自动换行（超出容器也不折行） -
white-space: pre-wrap：保留换行符和空格，且允许自动折行——日常最常用 -
white-space: pre-line：合并空格但保留换行符，适合纯文本段落
例如：
<div style="white-space: pre-wrap">第一行↵第二行↵第三行</div>会逐行显示，且内容超宽时仍能正常折行。
用 <br> 还是用 CSS
如果只是偶尔需要换行，<br> 简单直接；但如果内容来自用户输入、日志、配置文件等不确定来源，硬插 <br> 会污染语义，也难维护。
立即学习“前端免费学习笔记（深入）”；
- 结构化内容（如标题+描述）优先用块级元素或 CSS 控制布局
- 纯文本内容（如错误日志、代码片段）优先用
white-space: pre-wrap - 服务端输出带换行的字符串时，别忘了前端加样式，否则白写了
容易被忽略的兼容性细节
white-space 在 IE9+ 和所有现代浏览器都支持，但要注意：
-
pre-wrap在旧版 Safari（≤6）中对中文换行支持不稳定，可降级为pre-line - 如果父容器设了
overflow: hidden，又用了pre，长行会被截断而不折行 - Flex 或 Grid 容器里，
white-space依然生效，但子项若设了flex-shrink: 0可能导致溢出
换行不是靠“多敲几个回车”就能解决的事，关键在明确内容性质——是结构、是文本、还是代码，再选对载体和样式。
