html默认折叠连续空白符是规范行为；可用 插入不可断空格、white-space属性控制空白处理、pre标签预格式化，但应优先按语义选择方案。

为什么直接敲空格没用

HTML 默认会把连续的空格、制表符、换行符全部“折叠”成一个空格，这是规范行为，不是 bug。比如写 <p>hello<span></span> world</p>，中间 5 个空格最终只显示 1 个。

用   插入不可断空格

这是最轻量、最常用的方案，适合少量、确定位置的空格补位：

•   渲染为一个不换行的空格，浏览器不会折叠它
• 连续写多个：比如 word   word 就是三个空格宽度
• 注意别滥用——写 10 个   不仅难维护，语义上也混乱（它本意是防换行，不是占位）
• UTF-8 编码必须生效，否则可能显示为乱码或方块

用 white-space CSS 属性整体控制

适合需要保留整段文本原始空格结构的场景，比如日志片段、对齐表格、缩进说明：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• white-space: pre —— 完全保留所有空格和换行，但不自动换行（可能溢出容器）
• white-space: pre-wrap —— 推荐：保留空格和换行，同时允许内容在边界处正常折行
• white-space: pre-line —— 合并连续空格，但保留换行符（类似普通段落加手动回车）
• 用法示例：<div style="white-space: pre-wrap;">foo bar\n baz</div>

用 <pre class="brush:php;toolbar:false;"></pre> 标签包裹小段文本

语义最明确的预格式化方式，但带默认样式副作用：

• <pre class="brush:php;toolbar:false;"></pre> 内部所有空白（包括换行、缩进）原样渲染
• 默认使用等宽字体 + 上下外边距，若嵌入正文需重置：pre { font-family: inherit; margin: 0; }
• 不适合大段正文排版，仅推荐用于代码块、ASCII 图、诗歌等强格式需求
• 不要为了“多两个空格”就套 <pre class="brush:php;toolbar:false;"></pre>，过度使用会破坏语义和可访问性

真正麻烦的不是选哪种方法，而是得先想清楚：这个空格是语义需要（比如防换行），还是纯视觉对齐？前者优先用   或 white-space: nowrap，后者往往该用 padding/margin 或 flex 布局——用空格“凑位置”通常是临时方案，容易在响应式或字体变化时崩掉。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！