How to set min-width and max-width to fit an inline element text contains

For an element like is need to coverit with contain text

Balblabla short text vs Balblablablablablablablabla long text text so fit its container?

When is less text that also aply the min-width so its not fix its contain text only? Any Idea???

min-width: 20px;
max-width: 200px;


What do you want to achieve?

Not really sure I understand what you want but it sounds like you want the div to be display: inline-block; so its width is never more than the text needs?

I want with background: green; div only got that size how many text me write. and have a maximum size for longer text and for and a minimum for short text?

You likely have to increase the min-width a bit to see it work. Also still not really sure if this is what you want.

.min-max {
  min-width: 50px;
  max-width: 200px;
  background: green;
  display: table;
  word-break: break-word;

1 Like

Yes! Exactly. Can you tell me what does display table do that can do it with only that? I mean not display inline-block for reason? Whitch better? and why?


Thank you.

I don’t have a super good reason for it other than your layout kind of broke with inline-block because the <br> elements didn’t work with it.

I rarely use display: table (and table-cell etc.) but that is not because it isn’t useful, I just never really got into using it.

1 Like

Just for an update who read later. I got a general solution for it is called: width: max-content; also include -webkit and -moz prefix to work!

You may want to check the support for that before using Intrinsic Sizing. At least if this is for the site where you spend time adding support for IE.

Specs: CSS Intrinsic & Extrinsic Sizing Module Level 3