Как построчно закрасить текст в CSS?

Question

[Николай Козлов]

При задании фона, блок с текстом выглядит так:

Мне нужно добиться эффекта построчного закрашивания:

Можно ли это сделать средствами css? Если нет, подскажите какую-нибудь js-библиотеку.

Answer 1

[sergski]

На самом деле можно и без изменения разметки

Comments

[Николай Козлов]

а как побольше добавить пространства между строками, которое будет залито цветом, а не прозрачным?

[Ankhena]

Николай Козлов, padding и line-height

[sergski]

Николай Козлов, увеличить line-height

[Алексей Уколов]

Здесь только одна проблема — нижние строки съедают тех, что выше. В примере у «р» ногу отгрызли. Но если конкретные размеры выделения не критичны, то можно подогнать.
Ну и фиксированная ширина для кого-то может быть проблемой.

Answer 2

[mdss]

Мой вариант. Поддерживается автоматический перенос строк, минимум разметки и стилей. Нужна всего одна обертка, а не для каждого слова как предлагают выше.
https://codepen.io/mdss/pen/XzbVqV

Answer 3

[Николай Козлов]

я тоже поспрашивал. очень интересное решение предложили. может кому-нибудь пригодится.
https://codepen.io/chriscoyier/pen/pvBFg

Answer 4

[Stalker_RED]

Да уж, без библиотеки здесь никак

<span>вот построчно закрасить текст</span>

span {
  background: red;
  color: white;
}

jsfiddle.net/ecmfnac2

Comments

[JackShcherbakov]

Вы чего? Вот же так можно сделать, или я чего-то не понял? https://codepen.io/CitizenOne/pen/GOJEgM

[Stalker_RED]

JackShcherbakov,

[Stalker_RED]

JackShcherbakov, кстати, совершенно не обязательно делать отдельные спаны для каждого слова.

[JackShcherbakov]

Stalker_RED, Ваш код в JsFiddle тоже сарказм? Просто вы этот бедный span просто тупо не влезает в рамки и переносится на новую строку от безысходности XD

[Stalker_RED]

JackShcherbakov, У ТС не описано как он должен себя вести.

Можно сделать переносы как-то так: jsfiddle.net/ecmfnac2/1
или br-ов наставить.

[JackShcherbakov]

Stalker_RED, Да, ваш вариант лучше.

Answer 5

[Алексей Уколов]

Без изменения разметки на чистом CSS этого добиться нельзя.
Вот так можно гибко управлять размером хайлайта: https://codepen.io/alexey-m-ukolov/pen/MOwojN

Comments

[JackShcherbakov]

Хах, у меня тоже самое https://codepen.io/CitizenOne/pen/GOJEgM

[Алексей Уколов]

JackShcherbakov, хватит спамить в комментариях :)
У нас разные решения, но разметка одинаковая.

[Николай Козлов]

JackShcherbakov, а это на семантику влияет?

[Алексей Уколов]

Николай Козлов, спаны - стерильные в плане семантики элементы, а br тут вполне к месту. Но вообще вопрос ваш непонятен.

[Ankhena]

Зачем разные span'ы, если все равно br ставите?

[Алексей Уколов]

Ankhena, для того, чтобы использовать :: before.

[Ankhena]

Алексей Уколов, тяжелый случай, чем оправдано использование before, я на всякий случай не буду спрашивать

[Алексей Уколов]

Ankhena, действительно, спрашивать не нужно, достаточно прочитать текст ответа.

[Ankhena]

Алексей Уколов, задача решается одним инлайновым span'ом (либо через display к тому что было, не важно) с красным фоном и padding с line-height для красоты и br по необходимости. Но судя по скринам, br там и так в коде присутствовал.
Без before, без js, без всяких там неизвестных фантастических свойств и библиотек.

[Алексей Уколов]

Ankhena, все зависит от того, какая у задачи точная формулировка и насколько нужно соответствовать макетам. У большинства задач в нашей сфере есть не одно решение иу каждого свои достоинства и недостатки.

[Ankhena]

Алексей Уколов, i have a problem
Всегда много времени трачу на поиск самого красивого и оптимального решения
:)

Answer 6

[Максим]

я уже задавал подобный вопрос но разница в том что у меня по по hover: Как реализуется подобный hover?