html 自动包裹内容,关于html：display：内联块不会使包裹内容的宽度尽可能小

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

div {

max-width: 120px;

width: auto;

display: inline-block;

border: 1px solid black;

padding: 0.2rem;

}

Reallylongword test

实际结果：

所需结果：

这也不适用于将width限制为父项。

我到处搜索，我的代码正在使用此方法。我也尝试过这种方法(提琴)，但这是行不通的。

我知道使用word-break: break-all，但这确实很丑。

谢谢。

更新

我正在尝试制作一个导航栏。当前正在使用flexbox，而不是display: inline-block。我只是(或者至少我以为我做到了)将问题隔离到单个导航元素。显然，并非所有答案都符合我最初的导航栏问题。对不起。如果我没有解决我的实际问题，我将保留原始帖子。

宽度被指定为max-width。 正如我所同意的那样，在逻辑上max-width应该仅是最大宽度，而最小宽度应为auto + padding。 我的建议是将max-width设置为最小。 整洁的小故障tho :)

您不能这样做(没有JS)

可能重复：使容器在包装时收缩以适合子元素

根据您的链接问题之一中的答案：display: table-caption而不是inline-block即可满足您的需求。

div {

max-width: 120px;

width: auto;

display: table-caption;

border: 1px solid black;

padding: 0.2rem;

}

Reallylongword test

尽管鉴于我表达的问题，这确实可行。我的错是我没有解释我在什么情况下使用它：导航栏。我当前的导航栏使用flexbox。该解决方案不适用于flexbox或float。

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

我还发现您的解决方案对max-width或内部单词的长度均无响应。无论如何，它都会中断它，相当于。我已经修改了我的问题，以明确表示我希望它能够做出响应。

我明白你的意思了。 table-caption毕竟不是那么好...

您是否尝试过使用span标签。这是一个内联元素，内联元素的宽度仅与其内部的宽度相同。一旦使用了跨度，就可以将display：inline-block更改为display：inline;

我希望这有帮助

div {

max-width: 120px;

width: auto;

display: inline;

border: 1px solid black;

padding: 0.2rem;

}

Reallylongword test

问题在于文本完全忽略了其边界并且没有自动换行。如果我为容器设置了最大宽度，则容器不会将大小调整为最小。

您可以像下面那样调整max-width值吗？

div {

max-width: 110px;

width: auto;

display: inline-block;

border: 1px solid black;

padding: 0.2rem;

}

Reallylongword test

这就是文本自动换行时浏览器调整元素大小的方式。表单元格也会发生相同的情况。如果您使用的是非常具体的静态内容，则可以在要换行的位置加一个硬中断。这样可以解决问题，但会使您的内容变得僵硬。但是考虑到您对容器大小的要求非常具体，这可能对您有用。

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

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

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

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

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

我用来计算textWidth的函数在这里。

$.fn.textWidth = function(){

var html_org = $(this).html();

var html_calc = '' + html_org + '';

$(this).html(html_calc);

var width = $(this).find('span:first').width();

$(this).html(html_org);

return width;

};

这是一个JSFiddle进行演示。