CSSを使用して、要素全体の幅ではなく、テキストの幅に背景色を設定するにはどうすればよいですか？

143

私が欲しいのは、緑の背景がテキストのすぐ後ろにあり、ページ幅の100％ではないことです。これが私の現在のコードです：

h1 { 
    text-align: center; 
    background-color: green; 
}
<h1>The Last Will and Testament of Eric Jones</h1>
スニペットを展開

html  css 
— Hithereペーパーバッグ
ソース
これはスパンを入れずに実行できますか？
— トーマスピーター2013年
。スパンを追加しないようにするには、キャッチあなたが<H1>ブロック要素になった後の要素を確保する必要がありますです（ブロックからインラインに<H1>の表示プロパティを変更している可能性が
— ダン

回答:

185

テキストをのようなインライン要素に入れます<span>。

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

そして、インライン要素に背景色を適用します。

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

インライン要素はそのコンテンツと同じ大きさなので、それでうまくいくはずです。

— BalusC
ソース
6
ありがとう、残念です。HTMLを変更することはできません。
— トーマスピーター2013年
@tom：あなたにはスパンを置くためにJavaScriptを使用することができます。
— BalusC
1
おかげで、CSSを変更する権限しかありません。気にしないで。
— トーマスピーター2013年
20
display cssルールをh1セレクターに追加するだけで、<span>タグを追加する必要はありません。このように：h1 { display:inline; }
— Ludo-オフレコになります
2
display：tableの方が適切な選択です...次の返信のコメントセクションで強調表示されている問題を回避するには。display：inlineは、<h1>と<h2>が連結されて、同じ行に配置されます。
— ihightower 2016
65

オプション1

display: table;

  • 親は必要ありません

h1 {
    display: table; /* keep the background color wrapped tight */
    margin: 0px auto 0px auto; /* keep the table centered */
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
<h1>The Last Will and Testament of Eric Jones</h1>
スニペットを展開

バイオリン

http://jsfiddle.net/J7VBV/293/

もっと

display: table 要素に通常のHTMLテーブルのように動作するように指示します。

w3schools、CSS Tricksとそれについての詳細はこちら

オプション2

display: inline-flex;

  • text-align: center;親に必要

.container {
    text-align: center; /* center the child */
}
h1 {
    display: inline-flex; /* keep the background color wrapped tight */
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
<div class="container">
  <h1>The Last Will and Testament of Eric Jones</h1>
</div>
スニペットを展開

オプション3

display: flex;

  • flexの親コンテナが必要

.container {
  display: flex;
  justify-content: center; /* center the child */
}
h1 {
    display: flex;
    /* margin: 0 auto; or use auto left/right margin instead of justify-content center */
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
    <div class="container">
      <h1>The Last Will and Testament of Eric Jones</h1>
    </div>
スニペットを展開

約

おそらくFlexboxで最も人気のあるガイドであり、私が絶えず参照しているガイドはCSS Tricksです。

オプション4

display: block;

  • flexの親コンテナが必要

.container {
  display: flex;
  justify-content: center; /* centers child */
}
h1 {
    display: block;
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
<div class="container">
  <h1>The Last Will and Testament of Eric Jones</h1>
</div>
スニペットを展開

オプション5

::before

  • cssファイルに単語を入力する必要があります（あまり実用的ではありません）

h1 {
    display: flex; /* set a flex box */
    justify-content: center; /* so you can center the content like this */
}

h1::before {
    content:'The Last Will and Testament of Eric Jones'; /* the content */
    padding: 5px;font-size: 20px;background-color: green;color: #ffffff;
}
<h1></h1>
スニペットを展開

バイオリン

http://jsfiddle.net/J7VBV/457/

約

その他のCSS擬似要素::前と::の後、約CSSのトリック一般的と擬似要素でW3Schoolsの

オプション6

display: inline-block;

  • 中心position: absoluteとtranslateX

  • position: relative親が必要

.container {
  position: relative; /* required for absolute positioned child */
}
h1 {
  display: inline-block; /* keeps container wrapped tight to content */
  position: absolute; /* to absolutely position element */
  top: 0;
  left: 50%; /* part1 of centering with translateX/Y */
  transform: translateX(-50%); /* part2 of centering with translateX/Y */
  white-space: nowrap; /* text lines will collapse without this */
  padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
  <h1>The Last Will and Testament of Eric Jones</h1>
スニペットを展開

約

このCSSトリックの記事でのtransform: translate();（そして一般的には）中央揃えの詳細

オプション7

text-shadow: そして box-shadow:

  • OPが探していたものではなく、他の人がここで道を見つけるのに役立つかもしれません。

h1, h2, h3, h4, h5 {display: table;margin: 10px auto;padding: 5px;font-size: 20px;color: #ffffff;overflow:hidden;}
h1 {
    text-shadow: 0 0 5px green,0 0 5px green,
                 0 0 5px green,0 0 5px green,
                 0 0 5px green,0 0 5px green,
                 0 0 5px green,0 0 5px green;
}
h2 {
    text-shadow: -5px -5px 5px green,-5px 5px 5px green,
                  5px -5px 5px green,5px 5px 5px green;
}
h3 {
    color: hsla(0, 0%, 100%, 0.8);
    text-shadow: 0 0 10px hsla(120, 100%, 25%, 0.5),
                 0 0 10px hsla(120, 100%, 25%, 0.5),
                 0 0 10px hsla(120, 100%, 25%, 0.5),
                 0 0 5px hsla(120, 100%, 25%, 1),
                 0 0 5px hsla(120, 100%, 25%, 1),
                 0 0 5px hsla(120, 100%, 25%, 1);
}
h4 { /* overflow:hidden is the key to this one */
    text-shadow: 0px 0px 35px green,0px 0px 35px green,
                 0px 0px 35px green,0px 0px 35px green;
}
h5 { /* set the spread value to something larger than you'll need to use as I don't believe percentage values are accepted */
  box-shadow: inset 0px 0px 0px 1000px green;
}
<h1>The First Will and Testament of Eric Jones</h1>
<h2>The 2nd Will and Testament of Eric Jones</h2>
<h3>The 3rd Will and Testament of Eric Jones</h3>
<h4>The Last Will and Testament of Eric Jones</h4>
<h5>The Last Box and Shadow of Eric Jones</h5>
スニペットを展開

バイオリン

https://jsfiddle.net/Hastig/t8L9Ly8o/

より多くのオプション

上記のさまざまな表示オプションとセンタリング方法を組み合わせて、これを実行する方法は他にもいくつかあります。

— ハスティグ・ツサメンステレン
ソース
コンテナーや疑似要素を使用せずにこれを行うのは、単に素晴らしいことです！display: tableがそれほど強力である可能性があるとは思いもしませんでしたが、代替案が提供されたことを感謝します。
— CPHPython
52

ゲームには少し遅れますが、2セント追加すると思いました...

内部スパンの余分なマークアップを追加しないようにするには、<h1>表示プロパティをからblockに変更しますinline（キャッチは、<h1>ブロック要素の後に要素があることを確認することです。

HTML

<h1>  
The Last Will and Testament of
Eric Jones</h1> 
<p>Some other text</p>

CSS

h1{
    display:inline;
    background-color:green;
    color:#fff;
}

結果
ここに画像の説明を入力してください
JSFIDDLE http://jsfiddle.net/J7VBV/

— ダン
ソース
2
正しい？本当に？これにより、見出しが中央に配置されなくなります（インラインで表示されるため）。OPの質問には、中央揃えの見出しの要件が明確に含まれています。
— BalusC 2014年
1
@BalusC-元の質問でOPが見出しを中央に配置する必要があると明確に述べているところはありません。質問は明らかに緑の背景を全幅にしない方法を尋ねます。#justSaying
— ダン
2
OPのスクリーンショットとOPの最初のCSSは、それ以外のことを意味します。
— BalusC 2014年
5
たぶん、しかし、ここでは具体的なことを話している-仮定ではない。
— Dan
1
これにより、問題が追加されました。<h1>タグと<h2>タグがすぐ次の行にある場合、<h1>と<h2>は同じ行に表示されます。以下のdisplay：tableオプションは、<h1> <h2>タグ自体のソースコードを変更せず、cssのみを変更する場合に適しています。
— ihightower 2016
8

これを行うための非常に単純なトリックは、<span>タグを追加し、それに背景色を追加することです。思い通りの見た目になります。

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

そしてCSS

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

どうして？

<span> インライン要素タグ内のタグなので、効果を装ったコンテンツのみにまたがります。

— Starx
ソース
4

編集：以下の答えはほとんどの場合に当てはまります。しかしOPは、CSSファイル以外は編集できないと後で述べました。しかし、これはここに残しておくので、他の人に役立つかもしれません。

ここに画像の説明を入力してください

他の人が無視している主な考慮事項は、OPがHTMLを変更できないと述べていることです。

DOMで必要なものをターゲットにして、JavaScriptでクラスを動的に追加できます。その後、必要に応じてスタイルを設定します。

私が作った例では、<p>jQueryですべての要素をターゲットにして、 "colored"クラスのdivでラップしました

$( "p" ).wrap( "<div class='colored'></div>" );

次に、私のCSSでをターゲットに<p>して、背景色を指定して、display: inline

.colored p {
    display: inline;
    background: green;
}

表示をインラインに設定すると、通常継承するスタイリングの一部が失われます。したがって、最も具体的な要素をターゲットにして、残りのデザインに合うようにコンテナをスタイルするようにしてください。これは、機能する開始点としてのみ意図されています。慎重に使用してください。CodePenの作業デモ

— JGallardo
ソース
3

h1はブロックレベルの要素です。インラインレベルの要素なので、代わりにspanのようなものを使用する必要があります（つまり、行全体にまたがっていません）。

あなたの場合、私は以下を提案します：

style.css

.highlight 
{
   background-color: green;
}

html

<span class="highlight">only the text will be highlighted</span>
— アンディ
ソース
3

他の回答が注記しbackground-colorている<span>ように、テキストの周りにを追加してこれを機能させることができます。

あなたが持っている場合でも、あなたはline-heightギャップを見るでしょう。これを修正box-shadowするには、スパンを少し増やしてを追加できます。またbox-decoration-break: clone;、FireFoxで適切にレンダリングする必要があります。

編集：IE11でボックスシャドウの問題が発生しoutline: 1px solid [color];ている場合は、IEにも同様にを追加してみてください。

実際の動作は次のとおりです。

CSSテクニックの例

.container {
  margin: 0 auto;
  width: 400px;
  padding: 10px;
  border: 1px solid black;
}

h2 {
  margin: 0;
  padding: 0;
  font-family: Verdana, sans-serif;
  text-transform: uppercase;
  line-height: 1.5;
  text-align: center;
  font-size: 40px;
}

h2 > span {
  background-color: #D32;
  color: #FFF;
  box-shadow: -10px 0px 0 7px #D32,
    10px 0px 0 7px #D32,
    0 0 0 7px #D32;
  box-decoration-break: clone;
}
<div class="container">
    <h2><span>A HEADLINE WITH BACKGROUND-COLOR PLUS BOX-SHADOW :3</span></h2>
</div>
スニペットを展開

— コバーン
ソース
2

テキスト整列センターを削除してみて、中央<h1>または<div>テキストが存在します。

h1 {
    background-color:green;
    margin: 0 auto;
    width: 200px;
}
— AgnosticDev
ソース
1

HTML5 <mark>タグを使用できます。

HTML：

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

CSS：

mark
{
    background-color: green;
}
— ダン・ブレイ
ソース
1
OPにはCSSのみのソリューションが必要でした
— JGallardo 2018年
0

これを試してください：

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

h1:after {
    content:'The Last Will and Testament of Eric Jones';
    visibility: visible;
    display: block;
    position: absolute;
    background-color: inherit;
    padding: 5px;
    top: 10px;
    left: calc(30% - 5px);
}

calcはすべてのブラウザに対応しているわけではないことに注意してください:)元の投稿の配置と一致させたいだけです。

https://jsfiddle.net/richardferaro/ssyc04o4/

— リチャードフェラーロ
ソース
0

h1タグの幅について言及する必要があります。

あなたのCSSはこのようになります

h1 {
text-align: center;
background-color: green;
width: 600px;
 }
— ラミヤ
ソース
0

HTML

<h1>
  <span>
    inline text<br>
      background padding<br>
      with box-shadow
  </span>
</h1>

CSS

h1{
  font-size: 50px;
  padding: 13px; //Padding on the sides so as not to stick.


  span {  
    background: #111; // background color
    color: #fff;
    line-height: 1.3; //The height of indents between lines.
    box-shadow: 13px 0 0 #111, -13px 0 0 #111; // Indents for each line on the sides.
  }
}

コードペンでのデモ

— TiiGRUS
ソース
Firefoxではbox-decoration-break: clone;、developer.mozilla.org
— en
0

HTML

<h1 class="green-background"> Whatever text you want. </h1>

CSS

.green-background { 
    text-align: center;
    padding: 5px; /*Optional (Padding is just for a better style.)*/
    background-color: green; 
}
— LuckyThe4thJr
ソース
3
コードのみの回答は、回答にコンテキストを追加することができれば、この問題の解決策を探している人にとってはるかに有用になる可能性があります。
— デビッドバック
-2 

<h1 style="display:inline-block;text-align: center;background : red;">The Last Will and Testament of Eric Jones</h1>
スニペットを展開

— アニッシュ・クマール・グプタ
ソース
上手。それはいくつかのコードです。ほんの一部のコード。説明は一切ありません。これには、その周りのコンテンツに関連して見出しの動作を変更するという副作用があります。stackoverflow.com/a/32919558/19068とstackoverflow.com/a/20257339/19068の両方がまだ言ったことがないことは何も言われていない
— Quentin
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.