Установить цвет фона с помощью 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>

К сожалению,background применяется к полной метке <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}