Css When Inline-Block Elements Line-Break, Parent Wrapper Does Not Fit New Width

CSS when inline-block elements line-break, parent wrapper does not fit new width

You can't. By default, inline-block elements have a shrink-to-fit width:

The shrink-to-fit width is:

min(max(preferred minimum width, available width), preferred width).

Then,

• When preferred minimum width <= preferred width <= available width, the width will be the preferred width, as you desire.
• When available width <= preferred minimum width <= preferred width, the width will be the preferred minimum width, as you desire.
• When preferred minimum width <= available width <= preferred width, the width will be the available width, even if you don't like it.

If you really don't want this, I guess you could add a resize event listener with JS, and set the desired width manually.

Remove width after line break in div

It is happening because the text is wrapping into the second line when enough space is not available for the next word. This situation is coming in screen sizes between around 700px to 900px wide.

Use the relevant word wrapping techniques to get the desired result.

If you want your text in one line and don't want them to wrap then add white-space: nowrap; style in .list-text class.

CSS when inline-block elements line-break, parent wrapper does not fit new width

You can't. By default, inline-block elements have a shrink-to-fit width:

The shrink-to-fit width is:

min(max(preferred minimum width, available width), preferred width).

Then,

• When preferred minimum width <= preferred width <= available width, the width will be the preferred width, as you desire.
• When available width <= preferred minimum width <= preferred width, the width will be the preferred minimum width, as you desire.
• When preferred minimum width <= available width <= preferred width, the width will be the available width, even if you don't like it.

If you really don't want this, I guess you could add a resize event listener with JS, and set the desired width manually.

---

Related Topics