Hacer que el borde se ajuste al texto

Supongamos que tengo un div con algo de texto.

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

El borde del encabezado se extenderá los 600 píxeles a lo largo de la página, pero quiero que la palabra “Título” quede bien adentro. Sin embargo, no sé de antemano cuántos píxeles de ancho tiene la palabra, por lo que no puedo, por ejemplo, poner el “Título” dentro de un div y establecer su ancho explícitamente.

¿Hay alguna manera fácil de hacer que un borde se ajuste alrededor del texto que no se extiende completamente horizontalmente en un área?

Esto es porque h1 es un elemento de bloque, por lo que se extenderá a lo largo de la línea (o el ancho que le des).

Puede hacer que el borde rodee solo el texto configurando display:inline en el h1

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

Intenta ponerlo en un elemento span:

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

Pruebe esto y vea si obtiene lo que busca:

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

La forma más fácil de hacerlo es hacer que la pantalla sea un bloque en línea.

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

si haces esto debería funcionar

No estoy seguro, si eso es lo que quieres, pero podrías hacer que el div interno sea un elemento en línea. De esta manera, el borde debe envolverse solo alrededor del texto. Incluso mejor que eso es usar un elemento en línea para su título.

Solución 1

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

Solución 2

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

Editar: extraño, SO no interpreta mis ejemplos de código correctamente como bloque, por lo que tuve que usar el método de código en línea.