如何通过CSS样式替代HTML中的 实现空格效果

当然可以实现！浏览器默认会把HTML文本里的连续空格合并成一个，这就是为什么你直接写a a只会显示一个空格。要让浏览器保留这些空格，只需要给目标<span>添加合适的white-space CSS属性就行。

下面给你列出几个实用的属性选项，按需选择：

• white-space: pre：完全保留文本里的所有空白（空格、制表符、换行），但文本不会自动换行，必须手动加<br>才会换行
• white-space: pre-wrap：保留所有空格，同时文本会根据容器的宽度自动换行，推荐用这个，兼顾空格保留和自动换行的需求
• white-space: pre-line：这个会合并连续空格，只保留换行，不符合你的需求，就不用考虑了

示例代码 #

CSS

.blue-text {
  color: hsl(255, 100%, 50%);
  white-space: pre-wrap; /* 选这个最实用 */
}

HTML

<span class="blue-text">a    a</span>

这样写出来的效果就和你用四个 的效果完全一样，而且代码简洁多了。

如果你只是想在局部偶尔用，也可以直接把样式写在inline里，不用额外定义类名：

<span style="color:hsl(255,100%,50%); white-space:pre-wrap;">a    a</span>

内容的提问来源于stack exchange，提问作者ArekBulski