1

i'm making a new site where the headings have backgrounds around them and a little padding.

This is a responsive site, so in some states the headings will break into multiple lines, resulting in them losing the padding to the right on the first line, and to the left on the second line. I am using display:inline since the padding needs to be adjusted around each line.

Is there any way to keep the padding when breaking lines?

Example: http://jsfiddle.net/gmW5X/

The padding is missing after introducing and before the ...

This does not need to scale down to old ie since the problem only appears at the mobile css targeted to primarely iphone. However, i'd very much like not to alter too much html :/

2 Answers 2

0

I don't see another solution but wrap each word in span... http://jsfiddle.net/gmW5X/4

2
  • problem is i dont know where line-break will occur since it breaks on different places depending on the device :/
    – jonas
    Aug 28, 2012 at 10:13
  • yeah if i add a separate tag inside the headings i need to know beforehand where the line breaks will be? Also, they will come from a cms :/
    – jonas
    Aug 28, 2012 at 10:42
0
display: inline-block;

do the trick.

jsFiddle

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.