CSS - Apply Padding To Inline Element Across Two Lines

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

Solution 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/

Solution 2:

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?

Solution 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

Solution 4:

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.

Solution 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 */
}