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父项.

我搜索过,我的代码正在使用这种方法.我也试过这个(小提琴),但它不起作用.我知道使用word-break: break-all,但这真的很难看.

谢谢.

---

更新

我正在尝试制作一个导航栏.它目前使用的是flexbox,而不是display: inline-block.我只是(或者至少我以为我做过)将问题隔离到单个nav元素.显然,并非所有答案都符合我原来的导航栏问题.对不起.如果我没有得到实际问题的答案,我会保留原帖.

Answer 1

从你的一个相关问题中的答案: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

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

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