html - 显示 : inline-block does not make width as small as possible with wrapped contents

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>