通過CSS設置背景顏色僅用於帶文本的文本

Question

您將如何應用CSS僅背景色，而僅將顏色應用於可見文本。

我努力實現以下目標：

<div style="width:200px;background-color:white;"> 
<p style="background-color:red;color:black;">This text is longer than 200 pixel and therefore a line break will occur</p> 
</div> 

不幸的是，背景被應用於全與<p> - 標籤和換行符發生之前不與最後一個字符結束。在旁註中，我無法手動分解顯示的文本。

因此，如果輸出上面是這樣的：

----------this line is exactly 200px---------- 
This text is longer than 200 pixel and 
therefore a line break will occur 
---------------------------------------------- 

所以背景顏色應與「和」字結束第一行，並與字結束「出現」在第二行，離開<div>白色的背景。

我真的拉我的頭髮，並希望得到輸入，如果這甚至可能沒有手動設置換行符？我也會使用JavaScript解決方案，但只選擇一個CSS。

Answer 1

段落是塊元素 - 它們佔據其容器，而不是他們內容的寬度。

您需要使用<span>而不是<p>才能獲得理想的效果。

或者你也可以使<p>成爲內聯元素，但這可能會破壞頁面的其他方面。

p {display:inline}