如果第一个跨度具有最后一个字符空间,则跨距之间的奇怪间距

Question

我注意到这个问题是由本地化错误引起的 - 在翻译结束时还剩下一个空间,这会产生意想不到的效果.我在下面的小提琴中复制了它:

<style>
.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
  background-color: #d9534f;
  text-transform: uppercase;
}
</style>
<div>
    <p>Label with last character space</p>
    <span class="label">Label </span>
    <span>some text</span>
</div>
<div>
    <p>Label without space</p>
    <span class="label">Label</span>
    <span>some text</span>
</div>

标签类取自twitter bootstrap 3.1.1版.

你可以帮我理解为什么最后一个角色空间的跨度会粘到下一个角色空间,但是当从内部空间移除空间时它会恢复正常吗？

Answer 1

在 HTML 中，更多的空白字符（\t、\n、等）被一个空格（正好一个空格）替换。在第一个代码中，这个空间在里面span，没有理由在span.

在第二种情况下，空间在 之后正确呈现span，因为 是第一个。