Question

I’m using an H1 tag for title text and a SPAN tag inside it in order to add background color and padding, as per example:

example here

The problem is when the text overflows onto another line, the SPAN element padding does not effect the text on the other line/s.

Any one have any ideas about how to fix please? (i have looked at/tried the other examples here but ran into issues when using the ‘border-left’ technique – renders differently across ALL browsers.) Is there a way using jquery? Cheers, S.

EDIT:

Think I’ve managed to get this working ok – see http://jsfiddle.net/xqd87/124/

Answer 1

Based on your comment, the best I can do is add white-space:pre-wrap; to .bg-box. This gives you the desired space to the right of line ends but unfortunately doesn’t add space to the left of a new line.

Example