Make container fit text with line-wrapping in CSS? [duplicate]

Question

By default, when text wraps, the width of the container becomes the max width. Instead, I want the width to fit the wrapped text.

div {
  border: 1px solid red;
  max-width: 100px;
  display: inline-block;
}

<div>
qwertyuiop 
</div>
<div>
qwertyuiop qwertyuiop 
</div>

In the example above, I want the 2 boxes to have the same width. Is this possible without JS?

Re: duplicate of Make container shrink-to-fit child elements as they wrap: this has nothing to do with flexboxes

Answer 1

Yes, it is possible to achieve the desired behavior where the width of the container fits the wrapped text using CSS only. You can use min-content for the width property to achieve this. Here's how you can do it:

div {
    border: 1px solid red;
    max-width: 100px;
    display: inline-block;
    width: -moz-min-content; /* For Firefox */
    width: -webkit-min-content; /* For Chrome, Safari, and Opera */
    width: min-content; /* Standard syntax */
}

<div>
  qwertyuiop
</div>
<div>
  qwertyuiop qwertyuiop
</div>

Answer 2

Make the container fit the text with lineWrapping and ensure both boxes have the same width, you can use a combination of inline-block and some adjustments to the display propertie.

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text/Wrapping_breaking_text

https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

div {
  border: 1px solid red;
  max-width: 100px;
  display: inline-block;
  white-space: pre-wrap; /* Ensure the text wraps while preserving spaces */
  word-wrap: break-word; /* Allow the text to break within words to prevent overflow */
  vertical-align: top; /* Align the divs to the top for consistent spacing */
}

Answer 3

You can achieve this by using the min-content value for the width property. The min-content value causes the container to shrink to fit its content's minimum width, which is the narrowest possible width that does not cause any word to break.

div {
  border: 1px solid red;
  display: inline-block;
  width: min-content;
  max-width: 100px; /* Ensure the container does not exceed this width */
  word-wrap: break-word; /* Ensure long words wrap if necessary */
}

<div>
qwertyuiop 
</div>
<div>
qwertyuiop qwertyuiop 
</div>

The width: min-content; ensures that the width of each div will be just enough to fit its content without exceeding the max-width of 100px. This will cause the second div to wrap its text and not exceed the specified maximum width, while the first div will have the same width as the second div, ensuring consistency in their widths.