CSS を使用して、行で折り返されたテキストの塗りつぶし効果を実現します。

Question

<p>ここに最小限の例があります: <a href="https://codepen.io/cpcpcpcpcpx/pen/VwZWoyJ">https://codepen.io/cpcpcpcpcpx/pen/VwZWoyJ</ a> </p> <p>次の内容が含まれます: </p> <p> <pre class="brush:css;toolbar:false;">.wrapper { 幅: 200ピクセル; } h1 { フォントサイズ: 32px; フォントファミリー: Tahoma、Helvetica、サンセリフ; 行の高さ: 50px; } 。ヘッダーテキスト { 背景: #aabbcc; パディング左: 20px; パディング右: 20px; 境界半径: 6px; }</pre> <pre class="brush:html;toolbar:false;"><div class='wrapper'>

<span class='ヘッダーテキスト'> 長いテキストを折り返す </span> </h1> </div></pre> </p> <p>水平パディングはテキストの折り返しの最初と最後でのみ機能しますが、すべての行で機能したいと考えています。境界半径が各行のブレークポイントにないことは受け入れられますが、パディングを適用する必要があります。 </p> <p>.header-text クラスに padding-top を追加すると、両方の行に適用されるため、改行箇所で水平方向のパディング オプションが無視される理由がわかりません。 </p> <p>CSS でこの効果を実現する方法はありますか? </p>

Answer 1

.header-text の表示属性を block または inline-block に変更する必要があります

Answer 2

あなたが望むことは、box-decoration-break を使用することで達成できます。また、border-radius:

と併用することもできます。

リーリー リーリー