Заблокированный фон в строках внутри тега абзаца

Question

Я ищу способ выделить (или заполнить фоном) строки текста внутри абзаца.Я разрабатываю на WordPress, если это имеет значение.

Вот пример кода:

<p> this is a line
This is a line a little longer
Just a short one
a really really long one that is longer than any
a medium sized one to end it</p>

Я хочу, чтобы каждая строка имела черный фон, который соответствует только длине текста.Строки заключены только в 1 тег P, поэтому я не могу просто оформить каждую P.

Есть идеи / ссылки на учебные пособия?Я не думаю, что мне нужно прибегать к jquery, чтобы сделать каждую строку буквой P, но сделаю это, если это вариант.

Answer 1

Самым простым способом было бы установить абзац для отображения:встроите и добавьте к нему цвет фона.Однако вам нужно было бы добавить разрывы строк в конец каждой строки:

p {
   display: inline;
   color: white;
   background-color: black;
}

и этот абзац стал бы:

<p> this is a line<br/>
This is a line a little longer<br/>
Just a short one<br/>
a really really long one that is longer than any<br/>
a medium sized one to end it</p>

Answer 2

Браузеры обрабатывают разрывы строк как один пробел, поэтому вам придется изменить HTML.

Я не уверен, что вы можете определить, где существуют разрывы строк с помощью Javascript.В этом случае вам придется самостоятельно модифицировать HTML-код и в основном делать то, что предложил Пэт.

Answer 3

используя jquery, вы можете просто обернуть содержимое определенного тега в HTML с помощью Обертыватель функция.

Если вы поместите встроенный элемент (например, span) вокруг содержимого абзаца

$("p").wrapInner("<span></span>");

вам нужно будет только применить CSS к этому определенному встроенному элементу, например, вот так.

p span {
    background-color: black;
    color: white;
}

Используя это решение, нет необходимости каким-либо образом редактировать HTML.