Avere avvolgere bordo intorno al testo

Question

Supponiamo che io ho un div con un testo in essa

<div id='page' style='width: 600px'> 
    <h1 style='border:2px black solid; font-size:42px;'>Title</h1> 
</div> 

Il confine per la rubrica si estenderà tutti i 600 pixel attraverso la pagina, ma voglio la parola "Titolo" per adattarsi perfettamente dentro. Tuttavia, non so in anticipo quanti pixel siano larghi, quindi non posso, ad esempio, inserire il "Titolo" all'interno di un div e impostarne esplicitamente la larghezza.

C'è un modo semplice per adattare un bordo attorno al testo che non si estende completamente orizzontalmente su un'area?

Answer 1

Questo perché h1 è un elemento di blocco, quindi si estenderà attraverso la linea (o la larghezza che si dà).

È possibile effettuare il bordo solo andare intorno al testo impostando display:inline sul h1

Esempio: http://jsfiddle.net/jonathon/XGRwy/1/

Answer 2

Non sicuro, se è quello che vuoi, ma potresti rendere il div interno un elemento in linea. In questo modo il bordo dovrebbe essere avvolto solo attorno al testo. Ancora meglio è usare un elemento in linea per il tuo titolo.

Soluzione 1

<div id="page" style="width: 600px;"> 
    <div id="title" style="display: inline; border...">Title</div> 
</div> 

Soluzione 2

<div id="page" style="width: 600px;"> 
    <span id="title" style="border...">Title</span> 
</div> 

Edit: Strano, quindi non interpretare il mio codice-esempi correttamente come blocco, così ho dovuto usare inline-code-metodo .

Answer 3

Prova questa e vedere se si ottiene quello che si sta puntando:

<div id='page' style='width: 600px'> <h1 style='border:2px black solid; font-size:42px; width:fit-content; width:-webkit-fit-content; width:-moz-fit-content;'>Title</h1> </div>

Answer 4

Prova a metterlo in un elemento span:

<div id='page' style='width: 600px'> 
 
    <h1><span style='border:2px black solid; font-size:42px;'>Title</span></h1> 
 
</div>