"display: inline-block" 不会使包裹的内容宽度尽可能地小。

11 浏览
0 Comments

"display: inline-block" 不会使包裹的内容宽度尽可能地小。

我有一个带有inline-block和max-width设置的

，其中可能包含一些文本内容，这些内容可能会换行。我的问题是

总是占用可能的最大宽度，但仅在文本换行时。我希望在响应文本换行时，

尽可能地占用最小宽度。

div {
  max-width: 120px;
  width: auto;
  display: inline-block;
  border: 1px solid black;    
  padding: 0.2rem;
}

Reallylongword test

实际结果:

\"Actual

期望结果:

\"Desired

使用父元素限制width也无法解决问题。

我已经搜索过，并且我的代码正在使用这个方法。我也尝试过这个方法（Fiddle），但它并没有起作用。

我知道使用word-break: break-all，但那看起来很丑陋。

谢谢。

更新

我正在尝试制作一个导航栏。它当前正在使用flexbox，而不是display: inline-block。我只是（或者至少我以为我是）将问题隔离到单个导航元素。显然，并非所有答案都与我最初的导航栏问题相匹配。对不起。如果我无法获得实际问题的答案，我将保留原始帖子。

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

你试过使用span标签吗？它是一个内联元素，内联元素仅有它内部宽度那么宽。一旦你使用span，你可以将display: inline-block更改为display: inline;

我希望这能有所帮助。

div {
  max-width: 120px;
  width: auto;
  display: inline;
  border: 1px solid black;    
  padding: 0.2rem;
}


Reallylongword test

0
0 Comments

从您链接的问题中的这个答案中得知，使用display: table-caption代替inline-block可以实现你想要的效果。

div {
  max-width: 120px;
  width: auto;
  display: table-caption;
  border: 1px solid black;    
  padding: 0.2rem;
}


Reallylongword test

0