web-dev-qa-db-fra.com

Avoir une bordure autour du texte

Supposons que j'ai un div avec du texte dedans

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

La bordure de l'en-tête s'étendra sur les 600 pixels de la page, mais je veux que le mot "titre" tienne bien à l'intérieur. Cependant, je ne sais pas à l'avance combien de pixels le Word est large, donc je ne peux pas par exemple mettre le "Titre" à l'intérieur d'un div et définir sa largeur explicitement.

Existe-t-il un moyen simple d'ajuster une bordure autour du texte qui ne s'étend pas complètement horizontalement sur une zone?

htmlcsslayout
18
Steven Lu

Ceci est dû au fait h1 est un élément de bloc, il s'étendra donc sur la ligne (ou la largeur que vous donnez).

Vous pouvez faire passer la bordure uniquement autour du texte en définissant display:inline sur le h1

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

31
Jonathon Bolster

Essayez de le mettre dans un élément span:

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

Pas sûr, si c'est ce que vous voulez, mais vous pourriez faire de la div intérieure un élément en ligne. De cette façon, la bordure doit être enroulée uniquement autour du texte. Encore mieux que cela est d'utiliser un élément en ligne 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: Strange, SO n'interprète pas correctement mes exemples de code comme bloc, j'ai donc dû utiliser la méthode de code en ligne.

2
Alex Sawallich

Essayez ceci et voyez 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>
1
Ming Huang