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

HTML-CSS
1

For an element like is need to coverit with contain text

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

https://jsfiddle.net/5tquc8wn/

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;

Thanks.

2

What do you want to achieve?

3

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?

4

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?

5

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;
}

https://jsfiddle.net/d5hpeo7x/

1 Like
6

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?

Logic?

Thank you.

7

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
8

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!

9

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