display: inline-block 不会使包装内容的宽度尽可能小

Question

我有一个div，上面设置了inline-block 和max-width，以及一些可能包含在其中的文本内容。我的问题是div 总是尽可能采用最大宽度，但前提是文本换行。我希望使div 采用尽可能小的宽度，以响应文本换行。

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

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

<div>Reallylongword test</div>

实际结果：

想要的结果：

---

这也不适用于限制 width 与父级。

我四处搜索，我的代码使用的是this method。我也尝试过this (Fiddle)，但它不起作用。 我知道使用word-break: break-all，但这真的很难看。

谢谢。

---

更新

我正在尝试制作导航栏。它目前使用的是 flexbox，而不是 display: inline-block。我只是（或者至少我认为我做到了）将问题隔离到单个导航元素。显然，并非所有答案似乎都与我原来的导航栏问题相匹配。对不起。如果我没有得到实际问题的答案，我将保留原始帖子。

Answer 1

来自this answer 在您的一个链接问题中：display: table-caption 而不是inline-block 可以满足您的需求。

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

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

<div>Reallylongword test</div>

Answer 2

您是否尝试过使用 span 标签。它是一个内联元素，内联元素的宽度仅与其中的内容一样宽。使用 span 后，您可以将 display: inline-block 更改为仅 display: inline;

希望对你有帮助

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

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

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

Answer 3

你能像下面这样调整你的max-width 值吗？

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

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

<div>Reallylongword test</div>

Answer 4

这就是浏览器在文本换行时如何调整元素的大小。表格单元格也会发生同样的事情。如果您使用的是非常具体的静态内容，您可以在您希望文本换行的地方放置一个硬中断<br/>。这解决了问题，但使您的内容非常不灵活。但是，考虑到您的容器大小非常具体，这可能对您有用。

是否可以看到您的内容和您想要实现的设计？这将有助于提供解决方案。

Answer 5

根据上面 Fabian 的回答，这是浏览器如何调整元素大小以处理自动换行的结果。出于这个原因，我不相信纯 CSS 解决方案是可能的。但是，您可以动态确定宽度并将<div> 强制为该宽度：

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

我用来计算textWidth的函数是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;
};

这里有一个JSFiddle 来演示。