如何僅着色多行塊元素中的單詞？

我正試圖實現，只有多行標題元素中的文本具有背景顏色與行間的空白。如何僅着色多行塊元素中的單詞？

我目前的解決方案是將每個單詞都包含在一個範圍內，但遺憾的是它只能在Firefox和Chrome中正常工作。

這是我目前的HTML標記：

<div> 
    <h3> 
    <span>This</span> 
    <span>is</span> 
    <span>some</span> 
    <span>interesting</span> 
    <span>Text</span> 
    <span>without</span> 
    <span>any</span> 
    <span>meaning.</span> 
    </h3> 
</div>

這是我的CSS：


div { 
background: black; 
height: 200px; 
width: 300px; 
position: relative;  
} 

h3 { 
    position: absolute; 
    bottom: 20px; 
    left: 0; 
    right: 20%; 
    font-size: 0; 
    line-height: 20px; 
} 

span { 
    font-size: 14px; 
    color: black; 
    background: white; 
    font-weight: bold; 
    padding: 2px 6px 2px 0; 
}

請看看這的jsfiddle：http://jsfiddle.net/Ez92s/

如果你看它歌劇和Safari瀏覽器，這兩個詞之間沒有什麼差距，在IE10中這些詞彙都在一行中。

我該如何在任何瀏覽器（IE10 +）中實現它在Chrome中的外觀？

提前很多感謝，麥克法蘭

來源

2012-12-12 McFarlane

@SimonPertersen：您的解決方案消除了我想要的行之間的差距，並且它在Safari和IE10中無法正確顯示。你甚至嘗試過嗎？ – McFarlane

變化padding到margin

span { 
    font-size: 14px; 
    color: black; 
    background: white; 
    font-weight: bold; 
    margin: 2px 6px 2px 0; 
}

http://jsfiddle.net/Ez92s/1/

填充保留了背景顏色保證金沒有。

來源

2012-12-12 14:56:00 Liam

這正是我不想實現的。看我的帖子：Chrome和FF做我想做的。而且他們都不顯示差距。 – McFarlane

也許解釋它好一點？我注意到我不是唯一能得出這個結論的人（聳肩）。 – Liam

保證金加入跨度給予跨度它們之間的間距：

margin-right:1px;

js fiddle

來源

2012-12-12 14:58:25 CR41G14

我不想在單詞之間存在差距。只在行之間。 – McFarlane

我覺得你需要的每一個字，把整個文本中單跨和使用單詞後，除去跨度 - 例如span{ word-spacing:10px;}，如果你不想刪除跨度可以使用保證金而不是填充

來源

2012-12-12 15:06:10

謝謝。一個跨度在每個瀏覽器上按預期工作。我在這裏更新了我的小提琴：http://jsfiddle.net/Ez92s/4/ 現在我怎麼能在一行的最後一個單詞後面添加更多空間，以便背景不會立即停止？ – McFarlane

你的意思是你想在白色背景的末尾添加一些空格？如果是，只需添加填充。 –

我不能說Opera或Safari，但IE似乎迴應加入display: inline-block;您的迴應跨度定義。

來源

2012-12-12 15:21:43

如何僅着色多行塊元素中的單詞？

回答

相關問題