HTML5中多个空格默认被合并,可用四种方法原样显示:一、用 实体替代空格;二、用CSS white-space:pre-wrap属性;三、用标签包裹;四、用letter-spacing或margin模拟间距。

如果您在HTML5中直接输入多个空格,浏览器默认会将其合并为一个空格显示。这是因为HTML解析器遵循空白字符折叠规则。以下是实现多个空格原样显示的多种方法:
一、使用 实体字符
该方法通过插入不间断空格(non-breaking space)实体,逐个替代普通空格,从而绕过浏览器的空白折叠机制。
1、在需要保留多个空格的位置,将每个空格替换为 。
2、例如: 姓名: 张三 立即学习“前端免费学习笔记(深入)”;会在“姓名:”后显示三个连续空格。
3、注意:必须使用 而非直接输入空格,且每个空格需单独替换。
二、使用CSS white-space属性
该方法通过修改元素的空白处理行为,使浏览器保留所有空格、制表符和换行符,并按源码格式渲染。
1、为需要保留空格的HTML元素添加内联样式:style="white-space: pre;"。
2、或在CSS中定义类: 姓名: 张三.preserve { white-space: pre; },然后在HTML中应用:。
3、可选值包括pre、pre-wrap和pre-line;推荐使用pre-wrap,它既保留空格又允许自动换行。
三、使用标签包裹内容
是HTML原生预格式化文本标签,其默认样式即启用white-space: pre,且保留所有空白字符。
1、将含多空格的文本放入标签内,如:。
姓名: 张三
2、若需控制字体或行高,可额外添加CSS,例如:pre { font-family: sans-serif; line-height: 1.4; }。
3、注意:pre标签会默认使用等宽字体并禁用文字自动换行,需手动调整以适配页面设计。
四、使用CSS letter-spacing与margin组合模拟
当仅需视觉上拉开字符间距(非严格保留空格字符),可通过控制字距或外边距实现类似效果。
1、对目标文本设置letter-spacing,如:style="letter-spacing: 12px;"。
2、或为特定字符后的空格添加margin-right,例如用包裹空格: 。
3、注意:此法不改变HTML空格结构,仅影响渲染外观,不适合需精确空格计数的场景。










