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：保留所有空白和换行符，但不自动折行（类似） -
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;
用
适用场景很窄：
- 诗歌、地址、歌词等需要**精确控制换行位置**的纯展示内容
- 富文本编辑器导出的 HTML，且确认后端不支持样式注入
- 临时调试，别留到生产环境
其他情况——比如想让两句话在视觉上分开——应该用 或设置 margin-bottom。
Flex/Grid 容器里换行失效？检查 flex-wrap
在 display: flex 容器中，子元素默认不换行，哪怕设置了 white-space: normal 也没用。这是最容易忽略的上下文陷阱。
解决方法很简单：
- 加
flex-wrap: wrap允许子项换行 - 确保子项有明确宽度（如
flex: 0 0 200px）或最大宽度（max-width），否则它们会强行挤在一排 - 注意：
flex-direction: column下换行概念不存在，那是垂直堆叠
换行不是写个 white-space 和 flex-wrap 经常被父级样式意外覆盖，调试时得一层层查 computed styles。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
