当空间之间的跨度元素不流入？

为什么空的<span>元素不符合流动时夹在<span>元素之间的空格？当空间之间的跨度元素不流入？

下面是一个例子：

<span>h</span><span>e</span><span>l</span><span>l</span><span>o</span><span class="space"> </span><span class="empty"></span><span class="empty"></span><span class="empty"></span><span class="space"> </span><span>t</span><span>h</span><span>e</span><span>r</span><span>e</span>

上面，我们有一些<span>元素构成的短语。但是我在两个空间之间放置了一些空的元素。结果将空元素从流中取出。如果您使用调试工具，您会看到span.empty元素不再流入，并且被认为是0px，0px宽。

做不缠绕空间元素相同，和空元素是早在流量：

<span>h</span><span>e</span><span>l</span><span>l</span><span>o</span><span class="empty"></span><span class="empty"></span><span class="empty"></span><span>t</span><span>h</span><span>e</span><span>r</span><span>e</span>

谁能解释这是为什么？我使用Chrome 45

来源

2015-09-09 shennan

默认情况下，浏览器会崩溃的空间序列到一个单一的空间。我相信这背后的主要原因是，标记可以缩进可维护性而不影响最终的渲染输出。

在这两个示例中，.emptyspan都不包含任何内容，并且设置为默认display: inline;，这意味着它们不会占用任何水平空间。这两个示例之间的区别在于它们之间的差异：

在第一个示例中，它们位于两个空格之间，因此折叠不存在。你会得到相同的结果，如果.emptyspan小号中包含空格，
在你的第二个例子，他们被人物包围，因此空白崩溃不会在几个不同的浏览器的生效

测试，这似乎是Chrome如何决定显示折叠的元素。 Firefox和Opera会以不同的方式执行操作，并以相同的方式处理您的两个示例中的.emptyspan s（根本不显示它们）。

来源

2015-09-09 12:19:13

很棒的回答。此外，有用的知道什么火狐和Opera正在渲染。谢谢。 – shennan

您需要使用非打破空间：

<span>&nbsp;</span>

来源

2015-09-09 11:00:13

是的，我已经尝试过，它的工作原理，但它并没有真正回答这个问题“任何人都可以解释为什么这是？”。我不想使用非空格的原因是因为我想要空格继续打破。 – shennan

如果您不使用非中断空间，那么浏览器将忽略该空间。 –

对不起，但这仍然不能解释为什么。 – shennan

span标签display:inline默认，但通过在代码white-space受到影响。

白色空间没有大小它自己的，但它确实使

来源

2015-09-09 11:32:07

当空间之间的跨度元素不流入？

回答

相关问题