您将如何仅使用 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”结尾，在第二行以单词“occur”结尾，留下<div>的背景。白色。

我真的很紧张，如果无需手动设置换行符就可以得到输入，我很想得到输入？我也会选择 javascript 解决方案，但更喜欢 css 解决方案。

最佳答案

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

您需要使用 <span>而不是 <p>以获得预期的效果。

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

p {display:inline}

https://stackoverflow.com/questions/7123997/