white-space是css中控制空白符处理与换行行为的属性，常用值包括normal（合并空白、自动换行）、nowrap（禁止换行）、pre（保留空白且不换行）、pre-wrap（保留空白并允许换行）和pre-line（合并空白但保留换行符），需按场景选用以避免溢出、换行失效或缩进丢失。
直接用 white-space CSS 属性就能控制空白符行为，不用改 HTML 结构或加一堆 ——但选错值会导致文字溢出、换行失效或缩进丢失，得按场景挑。
white-space: normal 是默认行为，但常被误以为“能保留空格”
它其实会把所有连续空白（空格、制表符、换行符）压缩成一个空格，且自动换行。你写：
<p> Hello<br> World </p>
渲染出来就是 “Hello World”，前后和中间多余空格全没了，<br> 被当普通空格处理。
- 适用场景：普通段落、标题等不需要保留原始格式的内容
- 容易踩的坑：以为粘贴带缩进的用户输入能原样显示，结果全压扁了
- 注意：
normal下用
white-space: pre-wrap 最适合展示用户输入内容
它保留所有换行符和空格（包括缩进），同时允许长文本在容器边界自动换行——既不破坏格式，也不撑破布局。
比如用户在 <textarea></textarea> 里写了：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
function foo() {<br> return true;<br>}
用 white-space: pre-wrap 渲染后，缩进和换行都还在，超长行也会折行。
- 必须搭配字体设置（如
font-family: monospace）才看得清缩进 - 比
pre更安全：不会因一行太长导致横向滚动条或内容溢出 - 注意：HTML 实体（如
）仍需手动转义，否则有 XSS 风险
white-space: pre 和 <pre class="brush:php;toolbar:false;"></pre> 标签本质一样，但语义不同
pre 值会让元素像 <pre class="brush:php;toolbar:false;"></pre> 标签一样处理空白：保留所有空格、制表符、换行符，且**禁用自动换行**。哪怕容器很窄，它也硬扛着不折行。
- 适合代码块、日志输出等必须严格对齐的场景
- 风险点：没设
overflow-x: auto的话，可能把整个页面横向撑开 -
<pre class="brush:php;toolbar:false;"></pre>标签自带white-space: pre，但语义上表示“预格式化文本”，若内容不是代码/日志，用div+ CSS 更准确
nowrap 不是“保留空格”，而是“禁止换行”
white-space: nowrap 只做一件事：不管内容多长、容器多窄，全部挤在一行。空白照常合并，换行符照样变空格。
错误用法示例：
<div style="white-space: nowrap">Line 1<br>Line 2</div>
结果是 “Line 1 Line 2”，根本不会换行——<br> 在 nowrap 下无效。
- 真正用途：表格单元格防断词、导航菜单项强制单行显示
- 别用来“防止空格被吃掉”，它对空格处理逻辑和
normal完全一致 - 要让长单词不断行，得配合
overflow-wrap: break-word或word-break: break-all
最常被忽略的是：white-space 的行为依赖于父容器宽度和字体设置，同一段文本在不同上下文中可能表现不一；另外，它只影响渲染，不影响 DOM 中的实际字符——想存原始空格，还得靠 JS 处理输入值本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
