html - 背景色がテキストの幅の複数行の見出し

Question

2 行にまたがる可能性が高い見出しがあります。見出しに背景色を付けたいのですが、次のように、行のテキストの幅だけにまたがるようにします。

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

<span>Header タグ内に a を配置し、それに背景色を適用する状況でこれを行いました。行が途切れる場所にはパディングがありません。このフィドルをチェックしてください - http://jsfiddle.net/R5ZsG/

壊れた場所にパッドを入れることができる場合でも&nbsp、それを完全に制御できない場合があります。