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;
}