How to make element's width match text width with CSS

Question

I have an element that takes 100% of its container's width:

How do I make it so the width of the element is as wide as the text?

I can't find the answer online because I don't know how to formulate the question proprely.

float: left; works but it messes up the surrounding elements as some of them have this porperty as well. Is there another way?

score 2 · Accepted Answer · answered Mar 15 '21 at 20:51

You can set the display: inline-block OR display: inline (depends on your use case) for the element containing the text like so :

.text {
  display: inline;
  padding: 10px;
  background: firebrick;
}

<div class="text">text</div>

<div class="text">text text text</div>

1 Answers1