通过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>-tag 的完整,而不是在换行符之前的最后一个字符结束.在旁注中,我无法手动换行显示的文本.

所以如果上面的输出看起来像这样:

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