Have border wrap around text

Question

Suppose I have a div with some text in it   lt div id  page  style  width  600px  gt     lt h1 style  border 2px black solid  font-size 42px   gt Title lt  h1 gt   lt  div gt    The border for the heading will extend all 600 pixels across the page  but I want the word  Title  to fit tightly inside  However  I don t know ahead of time how many pixels wide the word is so I can t for example put the  Title  inside a div and set its width explicitly    Is there an easy way to make a border fit around text that does not fully extend horizontally across an area

User · Answer

Not sure  if that s what you want  but you could make the inner div an inline-element  This way the border should be wrapped only around the text  Even better than that is to use an inline-element for your title   Solution 1   lt div id  page  style  width  600px   gt       lt div id  title  style  display  inline  border     gt Title lt  div gt   lt  div gt    Solution 2   lt div id  page  style  width  600px   gt       lt span id  title  style  border     gt Title lt  span gt   lt  div gt    Edit  Strange  SO doesn t interpret my code-examples correctly as block  so I had to use inline-code-method

User · Answer

Try putting it in a span element    x000D   x000D   lt div id  page  style  width  600px  gt  x000D     lt h1 gt  lt span style  border 2px black solid  font-size 42px   gt Title lt  span gt  lt  h1 gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Try this and see if you get what you are aiming for    x000D   x000D   lt div id  page  style  width  600px  gt  x000D     lt h1 style  border 2px black solid  font-size 42px  width fit-content  width -webkit-fit-content  width -moz-fit-content   gt Title lt  h1 gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The easiest way to do it is to make the display an inline block  lt div id  page  style  width  600px  gt     lt h1 style  border 2px black solid  font-size 42px  display  inline-block   gt Title lt  h1 gt   lt  div gt   if you do this it should work

User · Answer

This is because h1 is a block element  so it will extend across the line  or the width you give    You can make the border go only around the text by setting display inline on the h1  Example  http   jsfiddle net jonathon XGRwy 1

[html] Have border wrap around text

Examples related to html

Examples related to css

Examples related to layout