css - テキストの周りの背景をクリップする簡単な方法はありますか?

Question

テキスト要素に背景色を付けると、自動的に 100% に引き伸ばされます。

通常、私はmax-widthそれをクリップするために使用しますが、時々margin、より良い方法が必要です (またはそうあるべきです)。

これは、私が何を意味するかを示すための jsfiddleです。背景をテキストに近づけるのに簡単で効果的な別の方法はありますか?

Answer 1

H3 に追加できますがdisplay : inline-block、幅が画面全体に広がることはありません。必要なだけパディングを追加します

Answer 2

インラインの子要素を追加し、これに背景色を追加します...

したがって、あなたのHTMLは

<h3 class="red">some text</h3>
<h3 class="red max">some text</h3>
<h3 class="red margin">some text</h3>
<h3 class="red custom">some text</h3>

に

<h3 class=""><span class="red">some text</span></h3>
<h3 class="max"><span class="red">some text</span></h3>
<h3 class="margin"><span class="red">some text</span></h3>
<h3 class="custom"><span class="red">some text</span></h3>

Answer 3

H3 はブロック要素です。つまり、特定の幅と高さを指定しない限り、そのコンテンツの周りだけを取得することはできません。そのようにしたい場合、最も簡単な解決策は、H3 をインラインのもの (つまり、SPAN) に変更するか、ネストされた要素にラップすることです。

<span class="red">some text</span>

また

<h3><span class="red">some</span></h3>

Answer 4

これは、H3 がブロック要素であるためです。ブロック要素 (SPAN など) を使用しない場合、見ているように背景色は引き伸ばされません。