display: inline-block does not make width as small as possible with wrapped contents

Question

I have a div that has inline-block and a max-width set on it, as well as some text content that may wrap inside. My problem is that the div always takes the maximum width possible, but only if the text wraps. I wish to make the div take the smallest width possible, in response to text wrapping.

div {
 
  max-width: 120px;
  width: auto;
  display: inline-block;

  border: 1px solid black;    
  padding: 0.2rem;
  
}

<div>Reallylongword test</div>

Actual Result:

Desired Result:

This does not work with restricting the width with a parent, either.

I have searched around, and my code is using this method. I have also tried this (Fiddle), but it just doesn't work. I am of aware using word-break: break-all, but that is just really ugly.

Thank you.

Update

I am trying to make a navbar. It is currently using flexbox, not display: inline-block. I just (or at least I thought I did) isolated the problem to single nav element. Apparantly, not all the answers seemed to match my original navbar problem. I'm sorry. I will preserve the original post if I don't get an answer to my actual problem.

The width is being assigned as `max-width`. Pretty neat as I agree, logically `max-width` should be ONLY the maximum width leaving the minimum to `auto` + `padding`. My suggestion is to max the `max-width` smaller. Neat little glitch tho :) — Kraang Prime, Dec 30 '16 at 01:12
possible duplicate: [Make container shrink-to-fit child elements as they wrap](http://stackoverflow.com/q/37406353/3597276) — Michael Benjamin, Dec 30 '16 at 03:52

score 9 · Answer 1 · edited May 23 '17 at 12:16

9

From this answer in one of your linked questions: display: table-caption instead of inline-block does what you want.

div {
  max-width: 120px;
  width: auto;
  display: table-caption;

  border: 1px solid black;    
  padding: 0.2rem;
}

<div>Reallylongword test</div>

edited May 23 '17 at 12:16

Community

1
1

answered Dec 30 '16 at 01:59

Sphinxxx

12,484
4
54
84

Although this does work given my expressed problem. It is my fault that I did not explain what situation I was using it for: a navbar. My current navbar uses flexbox. This solution does not work with flexbox or floats. – Dec 30 '16 at 02:43
With flexbox, you often need to put each item in a wrapper div. It's hard to give any advice without knowing your exact markup, but here is an example where the two first items (with wrappers) look like expected: https://jsfiddle.net/ukcguxg9/ – Sphinxxx Dec 30 '16 at 04:57
1

I also discovered that your solution is not responsive to either `max-width` or the length of the words inside. It just breaks it no matter what, equivalent to a `
`. I've modified my question to make it clear that I want it to be responsive. – Dec 30 '16 at 06:02

score 2 · Answer 2 · answered Dec 30 '16 at 01:37

2

Have you tried to use the span tag. It's an inline element and inline elements are only as wide as what's inside it. Once you've used span you can change display: inline-block to just display: inline;

I hope this helps

div {
 
  max-width: 120px;
  width: auto;
  display: inline;

  border: 1px solid black;    
  padding: 0.2rem;
  
}

<div><span>Reallylongword test</span></div>

answered Dec 30 '16 at 01:37

noisepierce

21
3

1

The problem with this is that the text completely ignores its boundaries and doesn't wrap. If I set a max-width to the container, the container doesn't resize to the smallest possible. – Dec 30 '16 at 02:57

score 1 · Answer 3 · edited Mar 18 '19 at 10:09

1

This is simply how browsers size an element when text wraps. The same thing happens with table cells. If you are using very specific, static content you could put a hard break <br/> where you want the text to wrap. This solves the issue but leaves your content very inflexible. However considering you are being very specific in your container size this might work for you.

Would it be possible to see your content and the design you are trying to achieve? It would help with offering solutions.

edited Mar 18 '19 at 10:09

Fabian Lauer

8,891
4
26
35

answered Dec 30 '16 at 01:30

Old Gill

164
8

I have a flex box navbar, with only a parent and children elements. When I resize the window, some nav items' text wrap, thus my problem. On another note, `
`s *might* work along with media queries or JS. – Dec 30 '16 at 02:34

score 0 · Answer 4 · answered Apr 11 '19 at 13:25

Building off of Fabian's answer above, this is a consequence of how browsers resize elements to handle word wrap. For this reason, I don't believe a pure CSS solution is possible. However, you can dynamically determine the width and force the <div> to that width:

var textWidth = $("div").textWidth();
$("div").width(textWidth);

The function I am using to caluclate textWidth is here.

$.fn.textWidth = function(){
  var html_org = $(this).html();
  var html_calc = '<span>' + html_org + '</span>';
  $(this).html(html_calc);
  var width = $(this).find('span:first').width();
  $(this).html(html_org);
  return width;
};

Here's a JSFiddle to demonstrate.

score -1 · Answer 5 · answered Dec 30 '16 at 07:39

-1

Can you adjust your max-width value like below?

div {
 
  max-width: 110px;
  width: auto;
  display: inline-block;

  border: 1px solid black;    
  padding: 0.2rem;
  
  
}

<div>Reallylongword test</div>

answered Dec 30 '16 at 07:39

Abk

2,137
1
23
33

display: inline-block does not make width as small as possible with wrapped contents

5 Answers5

Linked

Related