How to automatically set the width of an HTML element to the width of the enclosed text

Question

Here is an example:

I would like for the width of the h1 or a surrounding div to "clip" the text so that I can, for example, draw a border around only the text.

Answer 1

Just make the header element an inline element by giving it a display attribute of inline or inline-block:

h1 {
  border: 3px dotted black;
  display: inline-block;
}

<h1>Title</h1>

Alternatively, you can make the surrounding element have width: fit-content, though note that this is not supported in Internet Explorer:

.container {
  width: fit-content;
}

h1 {
  border: 3px dotted black;
}

<div class="container">
  <h1>Title</h1>
</div>

Answer 2

Just set the element style to display:inline or display:inline-block

.index-header {
    display: inline
}