Multi line heading with background color the width of text

Question

I have a heading which is likely to span over two lines, i'd like the heading to have a background color but for it to only span the width of the text on the line, like this:

http://f.cl.ly/items/0r3N2l3A1K3c3h2F3E3l/Screen%20Shot%202013-06-30%20at%2000.18.16.png

So far all the solutions I have found only appear to work against a background with a solid colour, anyone have any ideas how I can achieve this?

Answer 1

What your are requesting for is an old question that come up again and again once in a while , text or inline element cannot achieve it, element formated as a box will turn out to be square or rectangle.

The only way to do it , is to set side by side inline-block elements wrapping words or groups of words.

Script server or javascript can help you, so you should not have to mind text markup while typing.

The idea looks like this : http://jsfiddle.net/rnCTL/

   h1 span {
        background: #fff;
        line-height:44px;
        padding:4px 4px 4px 10px;
        margin:0;
        display:inline-block;
    }
    .headline-black {
        height:219px;
        width:367px;
        background:url(http://f.cl.ly/items/0r3N2l3A1K3c3h2F3E3l/Screen%20Shot%202013-06-30%20at%2000.18.16.png);
        padding:40px;
        box-sizing:border-box;
    }

Answer 2

Try this.

Basically if you have a containing background element you can any element on top of it with another background. Check out the Fiddle

h1{
    width:200px;
    background:white;
    display:inline-block;
    margin-left:60px;
}

Answer 3

I've done this in situations where you put a <span> within the Header tag and applying the background color to that. Bear in mind, you won't have any padding where the line breaks: check out this fiddle - http://jsfiddle.net/R5ZsG/

If you can put a &nbsp that would work to pad where it breaks but you might not have full control over it.