CSS - apply padding to inline element across two lines

Question

I have to create a style to apply a background color and padding to a header element, resulting the following intended appearance (Photoshop mock-up):

My CSS is as follows (edited to show relevant rules)

h1 {
    color: #fff;
    line-height: 1.4;
    background: #41a293;
    padding: 2px 4px; 
    display:inline;
}

This produces the following result:

I get padding at the start of the element ('S'), and at the very end ('e'), but not where the text breaks. The break happens due to the width of it's parent DIV. This will happen often and is necessary.

Is there any way to ensure the element gets even padding at the points where the text breaks?

Many thanks Dave

EDIT - I should have also said that the text content will display via a CMS (Wordpress).

Answer 1

If you're okay with the effect only being visible in WebKit/Blink browsers, you should use

-webkit-box-decoration-break: clone;
box-decoration-break: clone;

Which does exactly what you want, like here: http://jsfiddle.net/Cnuzh/13/

Answer 2

My boss loves using this feature in his designs recently, so I've had to come up with some solutions. Luckily for most of the ones we're doing, they are for titles on Sliders which will always be on two lines, so I took to using before and afters to insert a 10px line before each line of text. Not great cross browser compatibility I know, but works okay and doesn't look appalling in IE.

Here's a little jsFiddle to explain it:

http://jsfiddle.net/mP5vg/

This is the only pure CSS solution I could find.

P.S. Sorry for my messy code.

Answer 3

if you add

white-space:pre-wrap;

to your h1 it will look like this :

Still trying to figure a way to add the space before the (i) !

EDIT : Check this out : http://jsfiddle.net/ahmad/6qVVD/10/

--Still need a way to wrap the last word with jQuery--

Wrapping the last word with a span using jQuery

$('h1').each(function(index, element) {
    var heading = $(element), word_array, last_word, first_part;

    word_array = heading.html().split(/\s+/); // split on spaces
    last_word = word_array.pop();             // pop the last word
    first_part = word_array.join(' ');        // rejoin the first words together

    heading.html([first_part, ' <span>', last_word, '</span>'].join(''));
});

Working example : http://jsfiddle.net/6qVVD/12/

As you see it's working perfectly

Answer 4

Inline elements do not support padding and margin well, so make it block or inline-block (which is not cross browser) Why are you making it inline btw?

Answer 5

Demo here : http://jsfiddle.net/korigan/jzm3qu1q/1/

HTML

 <div class="wrap">
     <p class="highlight">
        <span class="text">Amet assumenda atque eos excepturi harum ipsa</span>
     </p>
 </div>

CSS

.wrap {
    width: 150px;
}
.highlight {
    color: #fff;
    display: inline;
    background: blue;
    font-size: 25px;
    font-weight: normal;
    line-height: 1.2;
}
.highlight .text {
        padding: 4px;
        box-shadow: 4px 0 0 blue, -4px 0 0 blue;
        background-color: blue;
        box-decoration-break: clone; /* For Firefox */
}

Answer 6

Here is one more trick for that:

Put <H1> in another div and give it border-left, but before it delete padding from <H1> css

<div id="wrap">
    <div class="fix">
       <h1>Specialists in retirement income</h1>
    </div>
</div>

CSS:

body { background:#ddd; }
#wrap { width:400px; background:white; }

h1 {
    color: #fff;
    background: #41a293;
    display: inline;
    word-spacing:10px;
    font: 30px/1.4 Arial, sans-serif;
    white-space:pre-wrap;
}

.fix {
    border-left:20px solid #41a293;
    }

See this fiddle

Answer 7

EDIT: nvm, didn't notice the white line; wouldn't giving & nbsp ; instead of regular spaces help?

give it an inline-block display, be sure to make it display:inline for ie7

regular

h1 { display:inline-block }

ie7 only

h1 { display:inline}

Answer 8

Maybe white-space:nowrap; is some solution.

Answer 9

According to this thread on WebmasterWorld, which is 2 year-old BTW, this should happen according to the W3 recommendations.

Try this: http://jsfiddle.net/laheab/6MhDU/

Just give each word its own <p> element and you should still get the desired effect.

Answer 10

Using jQuery to wrap every word inside your h1 into a span will pretty much do the trick. I have no clue how it affects SEO though to be honest.

This is what i'm using when i need to achieve this.

$("h1").each(function() 
    {
        var headerContent = $(this).text().split(' ');

        for (var i = 1; i < headerContent.length; i++) 
        {
            headerContent[i] = '<span class="subhead">' + headerContent[i] + '</span>';
        }

        $(this).html(headerContent.join(' '));
    }
);

http://jsfiddle.net/Cnuzh/

I think i actually got this from an answer from a similar question here on stackoverflow a while back. I'll post the link to the original author if this is the case. I shall look into it tomorrow, but first i need my nice warm bed ^^

Hope it helped,

WJ