Question

我注意到这个问题是由本地化错误引起的 - 翻译结束时还剩下一个空间，这会产生意想不到的效果。我已经复制了in the following fiddle：

<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之后正确呈现，因为它是第一个。

Answer 2

请注意，当您为最后一个字符引入空格时，标签的宽度会增加。

Answer 3

是的，我看到了奇怪的空间，但我在标签上添加了inline-block。现在你没有看到那个奇怪的空间。

.label {
  display: inline-block;
  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;
}

http://jsfiddle.net/c8w6ex37/3/

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

3 个答案: