Question

我认为只要你想在html中显示多个空格字符，&nbsp是必要的，但是this site告诉我多个连续空格都在渲染...为什么是是什么？

Answer 1

如果仔细查看源代码（在浏览器解释之前），您会发现该网站确实在网站中使用了 ：

示例（在一条路之前行之前）

<span style="line-height: 23px;"class="style_3">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span>

<span style="line-height: 23px; " class="style_1">
    ONE FOR THE ROAD
</span>

尝试将页面保存到您的计算机（使用浏览器的保存功能，而不是复制粘贴），并在记事本或类似的文本编辑器中查看源代码，您将在任何地方看到 实体。

Answer 2

常规空格（）换行到下一行。不间断的空格 会阻止换行到下一行。

假设| |是div的一面：

这是常规空间的呈现方式：

| |    
| |
| |
| |

然而，不间断的空间将继续在同一条线上。在HTML中，这将导致空间所在的元素超出auto宽度。

|  |    
| |
| |
| |

这将反过来推出那边的整个宽度：

|  |    
|  |
|  |
|  |

将呈现多个空格字符，但它们的执行方式与非破坏空格的执行方式不同。

看看this jsFiddle，它会清除任何混乱。

Answer 3

更简洁的方法是使用CSS white-space属性。

将值设置为pre或pre-wrap或pre-line都会显示多个空格（换行符处理方式各不相同）。

这是一篇很好的帖子：http://www.impressivewebs.com/css-white-space/

Answer 4

@Damon

 是用于表示不间断空间的实体。它本质上是一个空间，主要区别在于浏览器不应该在该实体占用的点处中断（或换行）一行文本，它还可以防止多个连续的空白字符折叠到一个单独的空间中，这就是当前的浏览器标准行为。

当您查看您mention的网站来源时，您会发现该网站实际上正在使用 实体格式化文字：

<span class="style_3" style="line-height: 23px; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>

连续空格何时出现在html中的规则是什么？

4 个答案: