CODEWITHSUNDEEP
htmlcss
user2486953
user2486953

Reputation:

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

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:
Actual Result

Desired 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.

Upvotes: 32

Views: 6738

Answers (6)

eballeste
eballeste

Reputation: 809

I found a solution using the newer width: min-content setting. This will force inline content to be as narrow as possible so then you compliment this with a combination of min-width and max-width values to get something that looks a little better.

.box {
  width: min-content;
  min-width: 100px;
  max-width: 120px;
}

there is baseline support for min-content so everybody should be able to enjoy building good looking UI's using this setting.

https://caniuse.com/?search=width%3A%20min-content

Upvotes: 0

Mark Lyons
Mark Lyons

Reputation: 1422

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.

Upvotes: 0

Old Gill
Old Gill

Reputation: 194

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.

Upvotes: 1

Abk
Abk

Reputation: 2233

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>

Upvotes: -1

Sphinxxx
Sphinxxx

Reputation: 13017

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>

Upvotes: 9

noisepierce
noisepierce

Reputation: 21

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>

Upvotes: 2

Related Questions