Quello che voglio è che lo sfondo verde sia appena dietro al testo, non al 100% della larghezza della pagina. Ecco il mio codice attuale:

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

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

Inserisci il testo in un elemento incorporato , ad esempio a <span>.

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

E quindi applicare il colore di sfondo sull'elemento incorporato.

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

Un elemento inline è grande quanto il suo contenuto, quindi dovrebbe farlo per te.

opzione 1

display: table;

• nessun genitore richiesto

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>

violino

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

Di Più

display: table dice all'elemento di comportarsi come farebbe una normale tabella HTML.

Maggiori informazioni su w3schools , CSS Tricks e qui

opzione 2

display: inline-flex;

• richiede text-align: center;sul genitore

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

Opzione 3

display: flex;

• richiede un contenitore padre flessibile

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

di

Probabilmente la guida più popolare a Flexbox e quella a cui mi riferisco costantemente è su CSS Tricks

Opzione 4

display: block;

• richiede un contenitore padre flessibile

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

Opzione 5

::before

• richiede l'inserimento di parole nel file CSS (non molto pratico)

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>

violino

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

di

Maggiori informazioni sugli pseudo elementi css :: before e :: after su CSS Trucchi e pseudo elementi in generale su w3schools

Opzione 6

display: inline-block;

• centrando con position: absoluteetranslateX

• richiede un position: relativegenitore

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

di

Maggiori informazioni su centrare transform: translate();(e centrare in generale) in questo articolo sui trucchi CSS

Opzione 7

text-shadow: e box-shadow:

• non quello che l'OP stava cercando, ma forse utile per gli altri a trovare la strada qui.

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>

violino

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

Più opzioni

Ci sono alcuni altri modi per farlo, combinando le diverse opzioni di visualizzazione e i metodi di centraggio sopra.

Un po 'in ritardo al gioco, ma ho pensato di aggiungere i miei 2 centesimi ...

Per evitare di aggiungere il mark-up aggiuntivo di un intervallo interno, è possibile modificare la <h1>proprietà di visualizzazione da blocka inline(in questo caso è necessario assicurarsi che gli elementi dopo <h1>siano elementi di blocco.

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

Risultato

JSFIDDLE http://jsfiddle.net/J7VBV/

Un trucco molto semplice per farlo è aggiungere un <span>tag e aggiungere il colore di sfondo a quello. Apparirà nel modo desiderato.

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

E CSS

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

PERCHÉ?

<span> tag in un tag di elemento inline, quindi si estenderà solo al contenuto fingendo l'effetto.

EDIT: la risposta di seguito si applica nella maggior parte dei casi. OP, tuttavia, in seguito ha affermato di non poter modificare altro che il file CSS. Ma lasceremo questo qui in modo che possa essere utile ad altri.

La considerazione principale che altri stanno trascurando è che OP ha dichiarato di non poter modificare l'HTML.

Puoi scegliere come target ciò di cui hai bisogno nel DOM, quindi aggiungere le classi in modo dinamico con javascript. Quindi lo stile di cui hai bisogno.

In un esempio che ho realizzato, ho preso di mira tutti gli <p>elementi con jQuery e l'ho avvolto con un div con una classe di "colorato"

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

Quindi nel mio CSS ho preso di mira il <p>e gli ho dato il colore di sfondo e sono cambiato indisplay: inline

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

Impostando il display su inline si perde parte dello stile che erediterebbe normalmente. Quindi assicurati di scegliere come target l'elemento più specifico e di dare uno stile al contenitore per adattarlo al resto del tuo design. Questo è solo un punto di partenza funzionante. Usare con attenzione. Demo funzionante su CodePen

h1 è un elemento a livello di blocco. Dovrai usare qualcosa come span invece che è un elemento di livello inline (cioè: non si estende su tutta la riga).

Nel tuo caso, suggerirei quanto segue:

style.css

.highlight 
{
   background-color: green;
}

html

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

Come notano le altre risposte, puoi aggiungere background-colora a <span>attorno al tuo testo per farlo funzionare.

Nel caso in cui line-height, tuttavia, vedrai delle lacune. Per risolvere questo problema, puoi aggiungere un box-shadowcon un po 'di crescita al tuo intervallo. Inoltre, box-decoration-break: clone;FireFox vorrà renderlo correttamente.

EDIT: se riscontri problemi in IE11 con il box-shadow, prova ad aggiungere anche un outline: 1px solid [color];solo per IE.

Ecco come appare in azione:

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

Prova a rimuovere il centro di allineamento del testo e centrare il testo <h1>o <div>il testo.

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

possono utilizzare HTML5 segno di tag all'interno del paragrafo e rubrica tag.

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

Puoi usare il <mark>tag HTML5 .

HTML:

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

CSS:

mark
{
    background-color: green;
}

Prova questo:

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

Si prega di notare che calc non è compatibile con tutti i browser :) Voglio solo essere coerente con l'allineamento nel post originale.

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

Devi menzionare la larghezza del tag h1 ..

il tuo css sarà così

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

Demo su codepen

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