html - 具有背景颜色的多行标题文本的宽度

Question

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

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

到目前为止，我发现的所有解决方案似乎都只适用于纯色背景，有人知道我如何实现这一点吗？

Answer 1

您所要求的是一个老问题，一次又一次地出现，文本或内联元素无法实现它，格式化为框的元素将变成正方形或矩形。

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

脚本服务器或 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 2

尝试这个。

基本上，如果你有一个包含背景元素，你可以在它上面的任何元素与另一个背景。 看看小提琴

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

Answer 3

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

如果您可以放置​​一个&nbsp可以填充它中断的地方，但您可能无法完全控制它。