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> 是换行符，不是段落分隔符。滥用会导致语义混乱、无障碍阅读器误读、响应式失效。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
适用场景很窄：
- 诗歌、地址、歌词等需要**精确控制换行位置**的纯展示内容
- 富文本编辑器导出的 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。
