交錯色彩behing文本換行

enter image description here

凡文本後面的黑色背景步履蹣跚，而不是創建一個黑盒子的字符串包裹時。這隻能通過動態字符串的CSS來實現嗎？

2013-01-14 Mild Fuzz

Here是你如何做到的。基本的想法是將每個單詞包裝在一個單獨的div中，並將這些div嵌套在另一個div中，寬度與內聯div的寬度相同。

<style> 
    .foo { 
     display: inline; 
     background-color: #000; 
     color: #fff; 
     margin: 0; 
    } 

    .wrapper { 
     width: 100px; 
    } 
</style> 
<div class="wrapper"> 
<div class="foo">Here </div><div class="foo">is </div><div class="foo">some </div><div class="foo">text </div><div class="foo">exciting </div><div class="foo">isn't </div><div class="foo">it </div> 
</div>

來源

2013-01-14 12:48:44

不僅僅是CSS，在動態情況下不太理想？！ –

在動態情況下，您可以在包裝上使用百分比寬度。 –

您能詳細說明您的「動態情況」是什麼意思嗎？ –

這實際上是內聯元素的默認行爲，例如span。下面的代碼應該有這個效果。

<span style="background-color: black; color: white">EYES ON<br/>FILM</span>

注意，<br/>是有說明的目的，還會如果文本是由瀏覽器包裝工作。如果您需要對div進行此操作，請務必在其上設置display: inline樣式。

來源

2013-01-14 12:47:39 rmhartog

奇數時，H5，我試圖總結，但有顯示：內聯;上？！ –

罷工，我注意到
標籤。有沒有辦法只用CSS做到這一點？ –

很奇怪，可能有一些其他風格干擾，因爲這在所有瀏覽器中都適用（見[jsfiddle]（http://jsfiddle.net/jQFaT/））。正如Christopher Tokar所建議的，你可以將每個單詞都包裝在一個div中，但看起來不那麼優雅。 – rmhartog

沿着這些線？

http://jsfiddle.net/wxDa7/

<style> 
    #a 
    { 
     width:50px; 
     font-size:20px; 
     line-height: 90%; 
     text-transform:uppercase; 
    } 
    #a .b 
    { 
     background-color:black; 
     color:white; 
    } 
</style> 
<div id="a"> 
     <span class="b">Test&nbsp; test&nbsp;</span> 
</div>

這autobreaks在限定的寬度。使用％nbsp;在文本之後獲得額外的空間。

來源

2013-01-14 12:50:36

它可以把一個<span>內的文本<p>內，或使用打字機文本元素（<tt>），或<code>標籤。

<tt>不接受HTML5。

例的jsfiddle： http://jsfiddle.net/gmDWP/

來源

2013-02-22 13:56:28 DBUK

交錯色彩behing文本換行

回答

相關問題