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

Answer 1

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:#ffffd; }
#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 2

Maybe white-space:nowrap; is some solution.

Answer 3

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 4

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 5

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 6

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.