white-space是控制html元素内空格、制表符、换行符渲染的核心css属性；normal合并空白并自动换行，nowrap合并空白但禁止换行，pre保留所有空白且不换行，pre-wrap和pre-line则分别在保留空白或换行符的同时支持自动换行。
white-space 是控制 HTML 元素内空格、制表符、换行符如何渲染的核心 CSS 属性。它不改变内容本身，只改变浏览器怎么“画”这些空白——直接决定文本是否换行、空格是否塌缩、回车是否生效。
normal / nowrap / pre 三个最常用值的区别
这三个值覆盖了 90% 的日常场景，但行为差异很关键：
-
normal：默认行为。连续空格/制表符/换行符全被合并成一个空格；文本在容器边界自动换行。 -
nowrap：同样合并空白符，但禁止自动换行，哪怕内容超出容器宽度，也不会折行——容易导致横向溢出或滚动条。 -
pre：完全保留原始空白（包括换行符\n、多个空格、制表符），且不自动换行；效果等同于<pre class="brush:php;toolbar:false;"></pre>标签，长行会横向撑开容器。
注意：pre 在 IE6+ 中需要标准模式（）才生效，否则退化为 <code>normal。
pre-wrap 和 pre-line 才是「既要换行又要保留格式」的解法
用户输入、日志输出、富文本摘要这类场景，常需要“保留换行符 + 自动折行”，pre 不够用，normal 又丢了回车——这时必须用：
-
pre-wrap：保留所有空白符（含\n和多个空格），同时允许在任意位置（包括单词中间）自动换行。 -
pre-line：合并连续空格和制表符，但保留换行符\n并将其转为<br>效果，再对每段做自动换行。
示例对比：
<div style="white-space: pre-wrap">第一行\n 第二行（两个空格）</div> <div style="white-space: pre-line">第一行\n 第二行（两个空格）</div>
前者显示两行，第二行开头有两个空格；后者显示两行，但第二行开头空格被合并，只留一个。
和 <pre class="brush:php;toolbar:false;"></pre> 标签混用时的语义与样式冲突
<pre class="brush:php;toolbar:false;"></pre> 默认自带 white-space: pre，但它是语义化标签，表示“这段内容本就是预格式化的”。如果仅为了视觉效果而用 <pre class="brush:php;toolbar:false;"></pre> 包裹普通文本，会误导可访问性工具和搜索引擎。
- 该用
<pre class="brush:php;toolbar:false;"></pre>：代码块、终端日志、ASCII 图等真正需保留原始排版的内容。 - 该用
white-space样式：按钮文字、卡片标题、评论摘要等需要灵活控制换行逻辑的普通元素。 - 陷阱：给
<pre class="brush:php;toolbar:false;"></pre>加white-space: pre-wrap是冗余的；反过来，给<p></p>加white-space: pre却忘了处理长单词，会导致横向滚动。
配合 text-overflow: ellipsis 实现单行省略时的常见错误
要让单行文本溢出显示 ...，必须同时满足三条件：
-
white-space: nowrap（阻止换行） -
overflow: hidden（隐藏溢出部分） -
text-overflow: ellipsis（触发省略号）
漏掉任意一条都会失效。比如只设 nowrap 不设 overflow: hidden，文本会直接撑宽容器；设了 overflow: hidden 但没设 white-space: nowrap，文本先换行了，根本不会溢出。
多行省略不能靠 white-space 解决，得用 -webkit-line-clamp 或 JS 截断——这点很容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
