複数行テキストのすべての行にパディングを適用するにはどうすればよいですか？

Question

<span>タグに背景色を適用しました。また、左右にpaddingが設定されています。問題は次のとおりです。paddingは、テキストが複数の行に折り返されたときに、各行の左（開始）および右（終了）ではなく、<span>の左（開始）および右（終了）にのみ適用されます。私は真ん中ラインに左右paddingを適用するにはどうすればよい

？

h1 { 
 
    font-weight: 800; 
 
    font-size: 5em; 
 
    line-height: 1.35em; 
 
    margin-bottom: 40px; 
 
    color: #fff; 
 
} 
 
h1 span { 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    padding: 0 20px; 
 
}

<h1><span>The quick brown fox jumps over the lazy dog.</span></h1>

Answer 1

あなたはcloneの値を持つbox-decoration-breakプロパティを使用することができます。

box-decoration-break: clone;各ボックス断片を指定境界、パディングとマージンラッピング各フラグメントで独立にレンダリングされます。 border-radius、border-image、box-shadowは、各フラグメントに独立して適用されます。バックグラウンドは各フラグメントで独立して描画されます。つまり、background-repeat：no-repeatの背景イメージが複数回繰り返される可能性があります。 - MDN

は救助にCSSのトリックでcaniuse.com

jsFiddle example

h1 { 
 
    font-weight: 800; 
 
    font-size: 5em; 
 
    line-height: 1.35em; 
 
    margin-bottom: 40px; 
 
    color: #fff; 
 
} 
 
h1 span { 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    padding: 0 20px; 
 
    -webkit-box-decoration-break: clone; 
 
    box-decoration-break: clone; 
 
}

<h1><span>The quick brown fox jumps over the lazy dog.</span></h1>

Answer 2

Multi-line-padded-textで、現在のブラウザのサポートの表を参照してください

HTML

<div class="padded-multiline"> 
    <h1> 
    <strong> 
     How do I add padding to subsequent lines of an inline text element? 
    </strong> 
    </h1> 
</div> 

CSS

.padded-multiline { 
    line-height: 1.3; 
    padding: 2px 0; 
    border-left: 20px solid #c0c; 
    width: 400px; 
    margin: 20px auto; 
} 
.padded-multiline h1 { 
    background-color: #c0c; 
    padding: 4px 0; 
    color: #fff; 
    display: inline; 
    margin: 0; 
} 
.padded-multiline h1 strong { 
    position: relative; 
    left: -10px; 
} 

NB：このためCSS Tricksのおかげで、および他の多くのヒント