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

Posted 2023-03-06

【中文标题】display: inline-block 不会使包装内容的宽度尽可能小

【英文标题】：display: inline-block does not make width as small as possible with wrapped contents

【发布时间】：2017-05-14 08:16:37

【问题描述】：

我有一个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。我只是（或者至少我认为我做到了）将问题隔离到单个导航元素。显然，并非所有答案似乎都与我原来的导航栏问题相匹配。对不起。如果我没有得到实际问题的答案，我将保留原始帖子。

【问题讨论】：

宽度被指定为max-width。我同意，非常整洁，逻辑上max-width 应该只是最大宽度，而最小宽度为auto + padding。我的建议是将max-width 最大化。整洁的小故障 :)

你不能这样做（没有 JS）

可能重复：Make container shrink-to-fit child elements as they wrap

【参考方案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>

【讨论】：

尽管考虑到我表达的问题，这确实有效。我没有解释我在什么情况下使用它是我的错：导航栏。我当前的导航栏使用 flexbox。此解决方案不适用于 flexbox 或浮动。

使用 flexbox，您通常需要将每个项目放在一个包装 div 中。在不知道您的确切标记的情况下很难给出任何建议，但这里有一个示例，其中前两个项目（带有包装器）看起来像预期的那样：jsfiddle.net/ukcguxg9

我还发现您的解决方案对max-width 或里面的单词长度都没有响应。无论如何它都会破坏它，相当于<br>。我已经修改了我的问题，以明确表示我希望它具有响应性。

【参考方案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>

【讨论】：

这个问题是文本完全忽略了它的边界并且不换行。如果我为容器设置了最大宽度，则容器不会调整到尽可能小的尺寸。

【参考方案3】：

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

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

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

<div>Reallylongword test</div>

【参考方案4】：

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

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

【讨论】：

我有一个弹性框导航栏，只有一个父元素和子元素。当我调整窗口大小时，一些导航项的文本会换行，这就是我的问题。另一方面，<br/>s 可能与媒体查询或 JS 一起工作。

【参考方案5】：

根据上面 F*** 的回答，这是浏览器如何调整元素大小以处理自动换行的结果。出于这个原因，我不相信纯 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 来演示。