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。我只是（或者至少我以为我做过）将问题隔离到单个nav元素。显然，并非所有答案都符合我原来的导航栏问题。对不起。如果我没有得到实际问题的答案，我会保留原帖。

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，只显示：inline;

我希望这会有所帮助

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

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

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

Answer 3

这就是浏览器在文本换行时如何调整元素的大小。表格单元格也是如此。如果您使用的是非常具体的静态内容，则可以在文本要包装的地方放置一个难度<br/>。这解决了问题，但使您的内容非常不灵活。但是考虑到你的容器尺寸非常具体，这可能对你有用。

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

Answer 4

您可以调整下面的max-width值吗？

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

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

<div>Reallylongword test</div>

Answer 5

基于Fabian的上述回答，这是浏览器如何调整元素大小以处理自动换行的结果。因此，我认为不可能有一个纯CSS解决方案。但是，您可以动态确定宽度并强制$达到该宽度：

<div>

我用来计算var textWidth = $("div").textWidth(); $("div").width(textWidth); 的函数是here。

textWidth

这里有一个JSFiddle来演示。

Answer 6

您不必使用max-width而是使用<br/>

div {
  width: auto;
  display: inline-block;

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

<div>Reallylongword <br/> test</div>