I frequently find myself doing this:

<span>
    <p>hello world</p>
</span>

to shrink the paragraph width to the text but it clutters my html. Is there any way to force the paragraph element to shrink to text without having to wrap it up in a span/div?

CodePudding user response：

If you are trying to adjust the paragraph width equal to it's content. There are couple of ways.

Using width: fit-content -

p {
  background-color: pink;
  width: fit-content;
}

<p>Hello World</p>

Using display: inline or display: inline-block -

p {
  background-color: pink;
  display: inline;
}

<p>Hello World</p>