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

因此背景颜色应以第一行上的“and”结尾，并以第二行中的“occurrence”结尾，留下<div>白色的背景。

我真的把头发拉出来，如果没有手动设置换行符，甚至可以获得输入？我也会使用javascript解决方案，但更喜欢只有一个css。

Answer 1

段落是块元素 - 它们占用容器的宽度，而不是内容。

您需要使用<span>代替<p>才能获得所需的效果。

或者你将<p>作为内联元素，但这可能会破坏页面的其他方面。

p {display:inline}