HTML默认折叠空白符是规范行为，为语义清晰；可用 插入不可折叠空格，或用white-space:pre-wrap等CSS属性控制，<pre>仅适用于需原样呈现的语义化场景。
为什么直接敲空格没用
HTML解析器默认会把连续空格、制表符、换行符全部“折叠”成单个空格，这是规范行为，不是bug。比如 <p>hello world</p> 渲染出来永远是 hello world，中间只显示一个空格。这种处理是为了语义清晰和流式布局，但对排版控制来说就是障碍。
用 插入不可折叠空格
这是最常用也最直接的方案，适合少量、确定位置的空格补充：
-
- 要显示 4 个空格，就写
{4} - 它在属性值里无效，比如
<div title="a b">中的 - 大量使用会让 HTML 源码难读、难维护，且语义上不表示“间距”，只是视觉hack
用 white-space CSS 属性整体控制
比起一个个插 ，更现代、可维护的方式是用 CSS 控制容器内空白行为：
-
white-space: pre：完全保留源码空格和换行，但不自动换行——超宽内容会溢出容器 -
white-space: pre-wrap：保留空格和换行，同时允许自动换行——日常首选，兼容性好（IE9+） -
white-space: pre-line：合并连续空格，但保留手动换行（\n或<br>）——适合纯文本段落微调 - 注意：设了
pre类值后，<span>内的换行也会被保留，可能意外破坏内联布局
什么时候该用 <pre> 标签
<pre> 是语义化方案，适用于内容本身就需要“原样呈现”的场景：
立即学习“前端免费学习笔记（深入）”；
- 代码块、日志输出、ASCII 图、诗歌等——这些本就该按源码格式渲染
- 它默认用等宽字体 + 上下 margin，若嵌入段落中，需重置
font-family和margin - 不要为了“多几个空格”而滥用
<pre>，它传递的是“预格式化文本”语义，不是“我要加空格” - 动态内容（如 JS 拼接字符串）插入到
<pre>内时，换行符\n才会被识别；用textContent赋值则不会触发换行，必须用innerHTML
真正容易被忽略的是：空格问题从来不是孤立的。它常和换行、字体度量、内联元素盒模型搅在一起。比如 letter-spacing 调整的是字符间隙，不是词间空格；word-spacing 对中文基本无效；而 在 flex 容器里可能被拉伸变形。动手前先想清楚——你到底要控制“空白字符的渲染”，还是“视觉间距”，两者策略完全不同。
