如果第一個跨度有最後一個字符空間，間距之間的奇怪間距

我注意到由於本地化排印錯誤導致的此問題 - 翻譯結束時留有空間，導致意想不到的效果。我轉載它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的引導3.1.1版拍攝。

您能否幫我理解爲什麼span最後一個字符空間會粘到下一個字符空間，但是當空間從內部移除時它會恢復正常？

來源

2015-05-27 Dmitry Evseev

@PeeHaa：是的，我再次閱讀的問題，打消了我的意見，而你寫你一個。 – panther

在HTML中，更多的空白字符（\t,\n,等）被替換爲一個空格（只有一個空格）。在第一個代碼中，這個空間在span之內，並且沒有理由在span之後渲染另一個空間。

在第二種情況下，由於是第一個，因此span之後的空間正確顯示。

來源

2015-05-27 07:19:36 panther

所以這是因爲它是一個內聯元素？ – PeeHaa

@PeeHaa：部分地，塊中的空間行爲會有所不同。在使用純文本和/或內聯元素時，只顯示第一個空格。 – panther

謝謝你的解釋！雖然這很奇怪，但我預計空間會考慮結束標籤 - 在這種情況下爲''。顯然這不是內聯元素髮生的。 –

請注意，當您爲最後一個字符引入空格時，標籤的寬度會增加。

來源

2015-05-27 07:20:09

是的，我看到了奇怪的空間，但我已將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/

來源

2015-05-27 07:32:44 Prime

謝謝@BaTmaN，我通過從翻譯中刪除空間解決了問題。我很好奇它爲什麼會發生。 –

@DmitryEvseev http://www.yourhtmlsource.com/stylesheets/cssspacing.html這可能會澄清你的疑問。 – Prime

如果第一個跨度有最後一個字符空間，間距之間的奇怪間距

回答

相關問題