多行标题与背景颜色文本的宽度

Question

我有一个可能跨越两行的标题，我希望标题有背景颜色，但它只能跨越行上文本的宽度，如下所示：

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

到目前为止，我发现的所有解决方案似乎只能在纯色背景下工作，任何人都有任何想法如何实现这一目标？

Answer 1

试试这个。

基本上，如果你有一个包含背景元素，你可以在它上面的任何元素与另一个背景。 的 Check out the Fiddle

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

Answer 2

您要求的是一个旧问题，偶尔出现，文本或内联元素无法实现，元素格式化为方框或矩形。

唯一的方法是并排设置包含单词或单词组的内联块元素。

脚本服务器或javascript可以帮助您，因此您在输入时不必考虑文本标记。

这个想法如下：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 3

我已经在你将<span>放在Header标签中并将背景颜色应用于此的情况下完成了这项工作。请记住，在换行符时不会有任何填充：请查看这个小提琴 - http://jsfiddle.net/R5ZsG/

如果你可以放置一个&nbsp来填充它会破坏的地方，但你可能无法完全控制它。