white-space属性是控制html空格渲染的核心开关；它决定空格、制表符、换行符的解析与显示方式，常见值包括normal、nowrap、pre、pre-wrap、pre-line，且需注意在属性值中不能用 分隔、内联样式须加引号、标签比css更可靠。
white-space 属性是核心控制开关
HTML 本身没有“空格属性”，真正起作用的是 CSS 的 white-space。它直接决定浏览器如何解析和渲染空格、制表符、换行符。别指望用 class 或 id 控制空格行为——那些只是钩子，最终靠 white-space 生效。
常见取值及实际效果：
-
normal：默认值，连续空格合并为一个，换行符被忽略 -
nowrap：空格照常合并，但整行不换行（容易溢出容器） -
pre：完全保留源码中的空格、制表符、换行，等宽字体渲染（适合代码块） -
pre-wrap：保留空格和换行，但允许自动折行（最常用，兼顾语义与排版） -
pre-line：合并空格，但保留换行符（适合诗歌或带段落的纯文本）
不能在 HTML 标签属性值里用 做分隔
很多人试图在 class="btn primary large" 或 data-id="123 456" 里塞 来“加空格”，这是无效的。HTML 解析器在读取属性值时，会先做空白折叠， 在属性上下文中不被识别为空格实体，反而可能引发解析错误或被当作字面字符显示。
正确做法：
- 多个 class 用普通空格分隔：
class="btn primary large" - 需要动态拼接的属性值，用 JavaScript 处理后再赋值，避免在 HTML 源码中硬写
- 若属性值本身含语义空格（如人名、地址），应原样保留普通空格，无需转义
style 属性里 white-space 要加引号且注意优先级
直接在标签上写内联样式时，style="white-space: pre-wrap;" 是可行的，但有两个易错点：
- 必须用英文分号结尾，且整个值要用双引号包裹，否则浏览器可能截断或忽略
- 内联
style会覆盖外部 CSS 中同名规则，但会被!important覆盖——如果页面已有全局white-space: normal，单靠内联可能不起作用 - 对
<input>、<textarea></textarea>等表单元素，white-space不生效；它们的空格行为由用户输入和value属性决定
预格式化场景优先用 而非 style
当你要展示代码、日志、ASCII 图或对齐表格时，<pre class="brush:php;toolbar:false;"></pre> 比 white-space: pre 更可靠。因为 <pre class="brush:php;toolbar:false;"></pre> 是语义化标签，自带默认样式（等宽字体 + 保留空白），且不会被某些 CSS 重置规则意外覆盖。
但要注意：
-
<pre class="brush:php;toolbar:false;"></pre>默认用font-family: monospace，如需改字体，必须显式设置font-family - 不要嵌套
<pre class="brush:php;toolbar:false;"></pre>在<p></p>里——HTML 规范不允许块级元素嵌套块级元素（<pre class="brush:php;toolbar:false;"></pre>是块级），会导致 DOM 结构异常 - 如果只需局部保留空格（比如某一行里的几个词），用
<pre class="brush:php;toolbar:false;"></pre>更轻量
空格问题从来不是“多敲几次空格键”的事，关键在理解浏览器何时折叠、何时保留、何时渲染——white-space 是那个开关，而 <pre class="brush:php;toolbar:false;"></pre> 和 是它在不同场景下的具体落地形态。混淆语义与表现，或者把空格当布局工具，最容易在响应式或内容提取时翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
