ページ全体の幅に影響を与えずに、要素内のテキストに背景色を適用するにはどうすればよいですか?

CSS のテキスト幅のみの背景色

のテキストの後ろに緑色の背景を適用したいと考えています。要素ですが、ページ幅全体には広がりません。以下の現在のコードではそれを実現できません:

<h1>
  The Last Will and Testament of Eric Jones
</h1>

h1 { 
  text-align: center; 
  background-color: green; 
}

のようなインライン要素を含めるように HTML を変更することはできないため、解決策はテキストをインライン要素に変換することです。要素。これは、テキストを で囲むことで実現できます。

<h1>
  <span>The Last Will and Testament of Eric Jones</span>
</h1>

h1 {
  text-align: center; 
}
h1 span { 
  background-color: green; 
}

インライン要素はコンテンツの幅にのみ広がり、ページ全体ではなくテキストの後ろにのみ緑色の背景が表示されるようにします。

>

以上がページ全体の幅に影響を与えずに、要素内のテキストに背景色を適用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。