Как реализовать выделение текста?

Question

[Алексей Николаев]

Добрый день! Столкнулся с проблемой.
При попытке создать фоновую заливку для текста и установить для этого же текста отступы (чтобы границы заливки не примыкали к краям собственно текста) обнаружил, что каждая следующая строка текста накладывается на предыдущую (что логично). А отступы для инлайновых элементов устанавливаются только в начале и в конце строки.

Что есть (левый рисунок) и что надо получить (правый рисунок):


Нет совершенно никаких здравых идей, одни костыли(

Буду очень благодарен за любые советы по теме, спасибо!

Answer 1

[Виталий Киренков]

chikuyonok.ru/2010/01/uniform-text-background

Comments

[Алексей Николаев]

Спасибо, отличная статья

Answer 2

[A K]

*{
line-height: 18px
}

Comments

[Евгений Петров]

Ну что же за гадость вы советуете...

[A K]

дайте верстку

[A K]

jsfiddle.net/Symphony/cee7kcjn

[Евгений Петров]

Я про *

[Алексей Николаев]

@Symphony гениально, возьму на вооружение, отличный способ!

Answer 3

[Евгений Петров]

Так и положено. Средствами CSS вы не сможете задать отступ для каждой перенесённой строки.
Как вариант — только скриптом, как в этой теме Как сделать такой бэкграунд для текста?
И вам не нужно скашивать элементы в начале и конце строк — то есть в решении упростятся стили.

Update: @DeLaVega продемонстрировал, что можно обойтись только средствами CSS.