İstediğim şey, yeşil arka planın metnin hemen arkasında olması, sayfa genişliğinin% 100'ü olmamasıdır. İşte benim geçerli kod:

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

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

Metni , gibi bir satır içi öğeye yerleştirin<span> .

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

Ardından, satır içi öğeye arka plan rengini uygulayın.

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

Satır içi bir öğe içeriği kadar büyüktür, bu yüzden sizin için yapmalıdır.

seçenek 1

display: table;

• ebeveyn gerekli değil

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>

Vaktini boşa harcamak

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

Daha

display: table öğeye normal bir HTML tablosu gibi davranmasını söyler.

Daha bu konuda en W3Schools'da , CSS Tricks ve burada

seçenek 2

display: inline-flex;

• gerektirir text-align: center;ebeveyn üzerinde

.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>

Seçenek 3

display: flex;

• esnek bir ana kap gerektirir

.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>

hakkında

Muhtemelen Flexbox ve sürekli referans verdiğim en popüler rehber CSS Tricks'te

Seçenek 4

display: block;

• esnek bir ana kap gerektirir

.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>

Seçenek 5

::before

• css dosyasına kelime girilmesini gerektirir (çok pratik değil)

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>

Vaktini boşa harcamak

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

hakkında

Css pseudo elements hakkında daha fazla bilgi :: before ve :: after at CSS W3schools'ta genel olarak pseudo elements

Seçenek 6

display: inline-block;

• position: absoluteve ile merkezlemetranslateX

• bir position: relativeebeveyn gerektirir

.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>

hakkında

Bu CSS hileci makalesindetransform: translate(); merkezleme (ve genel olarak merkezleme) hakkında daha fazla bilgi

Seçenek 7

text-shadow: ve box-shadow:

• OP ne aradığını değil ama belki burada yollarını bulmak başkalarına yararlı.

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>

Vaktini boşa harcamak

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

Daha fazla seçenek

Yukarıdaki farklı görüntüleme seçeneklerini ve merkezleme yöntemlerini birleştirerek bununla ilgili birkaç yol daha vardır.

Oyuna biraz geç kaldım ama 2 sentimi ekleyeceğimi düşündüm ...

Bir iç açıklığın fazladan işaretlemesini eklemekten kaçınmak için <h1>display özelliğini olarak blockdeğiştirebilirsiniz inline(catch, <h1>are blok öğelerinden sonraki öğelerin olmasını sağlamanızdır .

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;
}

Sonuç

JSFIDDLE http://jsfiddle.net/J7VBV/

Bunu yapmak için çok basit bir hile, bir <span>etiket eklemek ve buna arka plan rengi eklemek. Tam istediğiniz gibi görünecektir.

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

Ve CSS

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

NEDEN?

<span> satır içi öğe etiketinde etiketlendiğinden, yalnızca efekti taklit eden içeriğe yayılır.

EDIT: çoğu durumda aşağıdaki cevap geçerli olacaktır. Ancak OP daha sonra CSS dosyası dışında hiçbir şeyi düzenleyemediklerini belirtti. Ama bunu burada bırakacak, böylece başkaları için yararlı olabilir.

Diğerlerinin ihmal ettiği ana husus OP'nin HTML'yi değiştiremediklerini belirtmesidir.

DOM'da ihtiyacınız olanları hedefleyebilir ve ardından javascript ile dinamik olarak sınıflar ekleyebilirsiniz. Sonra ihtiyacınız gibi stil.

Yaptığım bir örnekte, tüm <p>öğeleri jQuery ile hedefledim ve "renkli" sınıfıyla bir div ile tamamladım

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

Sonra CSS'imde hedefledim <p>ve arkaplan rengini verdim vedisplay: inline

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

Ekranı satır içi olarak ayarlayarak normalde devralınacağı stilin bir kısmını kaybedersiniz. Bu nedenle, en spesifik öğeyi hedeflediğinizden ve kabı tasarımınızın geri kalanına uyacak şekilde biçimlendirdiğinizden emin olun. Bu sadece çalışan bir başlangıç ​​noktasıdır. Dikkatli kullanın. CodePen üzerinde çalışma demosu

h1 bir blok seviyesi elementidir. Satır içi düzey öğesi olduğu için span gibi bir şey kullanmanız gerekir (yani: tüm satırı kapsamaz).

Sizin durumunuzda aşağıdakileri öneririm:

style.css

.highlight 
{
   background-color: green;
}

html

<span class="highlight">only the text will be highlighted</span>

Diğer cevapların notuna göre, background-colorbir<span> bunun işe yaraması için metninizin çevresine .

Yine de sahip olduğunuz durumda line-heightboşluklar göreceksiniz. Bunu düzeltmek box-shadowiçin, yayılma alanınıza biraz büyüyün. Ayrıca box-decoration-break: clone;FireFox'un düzgün bir şekilde işlemesini de isteyeceksiniz .

DÜZENLEME: IE11'de kutu gölgesiyle ilgili sorunlar alıyorsanız, outline: 1px solid [color];yalnızca IE için de eklemeyi deneyin .

İşte işte böyle görünüyor:

.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>

Metin hizalama merkezini kaldırmayı ve ortalamak <h1>veya <div>metin Oturuyor.

h1 {
    background-color:green;
    margin: 0 auto;
    width: 200px;
}

paragraf ve başlık etiketi içinde html5 işaret etiketi kullanabilir .

<p>lorem ipsum <mark>Highlighted Text</mark> dolor sit.</p>

HTML5 <mark>etiketini kullanabilirsiniz .

HTML:

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

CSS:

mark
{
    background-color: green;
}

Bunu dene:

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);
}

Lütfen calc'nin tüm tarayıcılarla uyumlu olmadığını unutmayın :) Sadece orijinal yayındaki hizalama ile tutarlı olmak istiyorum.

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

H1 etiketinin genişliğinden bahsetmelisiniz.

css'in böyle olacak

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

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.
  }
}

Kod üzerinde demo

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; 
}