Avoir un borderwork autour du texte

Supposons que j'ai un div avec un texte

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

La frontière pour la tête de prolonger tous les 600 pixels de la largeur de la page, mais je veux que le mot "Titre" pour s'adapter étroitement à l'intérieur. Cependant, je ne sais pas à l'avance combien de pixels de large, le mot est donc je ne peux pas par exemple de mettre le "Titre" à l'intérieur d'un div et de définir sa largeur explicitement.

Est-il un moyen facile pour faire une bordure fit autour d'un texte qui ne tendez pas complètement à l'horizontale à l'échelle d'une région?

source d'informationauteur Steven Lu

  1. 21

    C'est parce que h1 est un élément de bloc, donc il va s'étendre sur toute la ligne (ou la largeur de vous donner).

    Vous pouvez faire de la frontière aller seulement à travers le texte par la mise en display:inline sur le h1

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

  2. 2

    Pas sûr, si c'est ce que vous voulez, mais vous pourriez faire à l'intérieur de la div une ligne-élément. De cette façon, la frontière doit être enveloppé seulement autour du texte. Encore mieux est d'utiliser une ligne-élément pour votre titre.

    Solution 1

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

    Solution 2

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

    Edit:
    Étrange, AFIN de ne pas interpréter mon code-exemples correctement en tant que bloc, j'ai donc dû utiliser inline-code-méthode.

  3. 1

    Essayer cela et voir si vous obtenez ce que vous visez:

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