white-space属性控制空白符处理与换行行为，需结合overflow-wrap、word-break及flex-wrap等协同使用。常见值包括normal（默认）、nowrap、pre、pre-wrap；长单词截断推荐overflow-wrap: break-word；仅适用于语义化换行场景，非段落分隔。
white-space 属性控制换行行为
HTML 本身没有“换行属性”，真正起作用的是 CSS 的 white-space。它决定空格、制表符、换行符是否被保留，以及内容是否自动折行。
常见错误是直接在 HTML 里加多个 或
<br>想模拟段落换行，结果响应式下错乱，或复制文本时带出多余空格。
-
white-space: normal（默认）：合并空白符，允许自动换行 -
white-space: nowrap：不换行，哪怕超出容器宽度 -
white-space: pre：保留所有空白和换行符，但不自动折行（类似<pre class="brush:php;toolbar:false;"></pre>） -
white-space: pre-wrap：保留换行和空格，同时允许自动折行——这是最接近“既要格式又要响应”的选择
word-break 和 overflow-wrap 处理长单词截断
当内容含超长英文/URL（如 https://example.com/very-long-path-with-no-dashes-or-spaces），即使 white-space: normal 也常不换行，直接撑破容器。
这时得靠 word-break 或 overflow-wrap 配合使用：
立即学习“前端免费学习笔记（深入）”；
-
word-break: break-all：粗暴断词，中文也按字切，可能影响可读性 -
overflow-wrap: break-word（旧名word-wrap: break-word）：只在必要时断开长单词，优先保持词完整 - 推荐组合：
white-space: normal; overflow-wrap: break-word;
用 <br> 还是 CSS？看语义要不要保留
<br> 是换行符，不是段落分隔符。滥用会导致语义混乱、无障碍阅读器误读、响应式失效。
网优宝(woyobo)基于Asp.net 2.0 (C#) + Access 2003 架构，全站使用Div+Css 设计界面，方便修改，利于Seoer进行优化.全站使用伪静态，后台可自由切换多种后缀名的网页格式,增加对搜索引擎的友好性。 网优宝的设计开发完全基于Seoer的优化习惯，本站全站采用伪静态设置，Div+Css架构，后台自带多种模板，可自由切换，后台锚文本自动添加，新闻产品定时发布，大
适用场景很窄：
- 诗歌、地址、歌词等需要**精确控制换行位置**的纯展示内容
- 富文本编辑器导出的 HTML，且确认后端不支持样式注入
- 临时调试，别留到生产环境
其他情况——比如想让两句话在视觉上分开——应该用 <p></p> 或设置 margin-bottom。
Flex/Grid 容器里换行失效？检查 flex-wrap
在 display: flex 容器中，子元素默认不换行，哪怕设置了 white-space: normal 也没用。这是最容易忽略的上下文陷阱。
解决方法很简单：
- 加
flex-wrap: wrap允许子项换行 - 确保子项有明确宽度（如
flex: 0 0 200px）或最大宽度（max-width），否则它们会强行挤在一排 - 注意：
flex-direction: column下换行概念不存在，那是垂直堆叠
换行不是写个 <br> 就完事的事。它牵扯语义、响应式、可访问性，还有不同 CSS 属性之间的优先级和叠加效果。尤其在嵌套布局或第三方组件里，white-space 和 flex-wrap 经常被父级样式意外覆盖，调试时得一层层查 computed styles。
