display: inline с padding на следующей строке

[Torawhite]

Здравствуйте! Необходимо залить фон текста по его ширине каждой отдельной строки. То есть, есть у меня заголовок в блоке, который не влезает по ширине, часть заголовка переносится на следующую строку. Но необходимо, чтобы заливка была только по ширине текста а не по ширине всего блока, по типу выделения текста курсора. Как это сделать я разобрался - display: inline. Только есть одна проблема - padding. Он установлен слева и справа, вот только вторая и последующие строки его не имеют, так как это единая строка и отступ будет только вначале и в конце. Можно как-то сделать, чтобы отступ был и на следующих строках.

Понять сложно, поэтому прилагаю иллюстрацию

[Great Rash]

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

[DivMan]

display:inline-block

[Torawhite]

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

Спасибо! Вариант с outline хорош. Но он устанавливает равномерную толщину по всему периметру, а как быть, если сверху и снизу не требуется? outline некорректно отображается в chrome, а вариант со смещением блоков не годятся для прозрачности фона.

 

display:inline-block

Спасибо, но не то пальто...

Edited March 23, 2015 by Torawhite

[Great Rash]

Что-то я подумал тут, и придумал вот такой код. В Хроме точно работает, в других браузерах не проверял. Возможно с префиксами заработает везде кроме старых ИЕ.

[Torawhite]

Что-то я подумал тут, и придумал вот такой код. В Хроме точно работает, в других браузерах не проверял. Возможно с префиксами заработает везде кроме старых ИЕ.

Рыжая лиса не принимает

[Great Rash]

А так?

[Torawhite]

А так?

Так работает, но какие-то нижние углы "рваные"

[SelenIT]

От рваных углов, похоже, помогает конкретное значение line-height в пикселях.

[Torawhite]

От рваных углов, похоже, помогает конкретное значение line-height в пикселях.

Определённо есть какая-то зависимость от line-height. Какое-то значение делает углы ровными, а какое-то - рваными

Только на "лисе" почему-то...safari тоже капризничает...

Edited March 23, 2015 by Torawhite

[SelenIT]

Судя по всему, line-height должен быть не меньше, чем font-size, умноженный на дефолтную высоту шрифта, прошитую в его метриках (там обычно жутко дробный множитель навроде 1,328). Насколько я могу судить, тень в Фоксе берет большее из них и в случае дроби не округляет, а пытается "сгладить". Вообще это выглядит как явный баг, надо бы пожаловаться в багзиллу...

 

Как временное решение, рыжего зверя еще можно попытаться укротить вот так.

[Torawhite]

Судя по всему, line-height должен быть не меньше, чем font-size, умноженный на дефолтную высоту шрифта, прошитую в его метриках (там обычно жутко дробный множитель навроде 1,328). Насколько я могу судить, тень в Фоксе берет большее из них и в случае дроби не округляет, а пытается "сгладить". Вообще это выглядит как явный баг, надо бы пожаловаться в багзиллу...

 

Как временное решение, рыжего зверя еще можно попытаться укротить вот так.

Да, похоже на панацею! Спасибо большое! Правда код перешёл в разряд совсем мистических