通过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}