显示:内联块不会使包裹内容的宽度尽可能小 [英] display: inline-block does not make width as small as possible with wrapped contents

问题描述

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

I have a div that has inline-block and a max-width set on it, as well as some text content that may wrap inside. My problem is that the div always takes the maximum width possible, but only if the text wraps. I wish to make the div take the smallest width possible, in response to text wrapping.

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

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

<div>Reallylongword test</div>

实际结果:

所需结果:

这也不能与限制父项的 width 一起使用.

This does not work with restricting the width with a parent, either.

我已经搜索过，并且我的代码正在使用此方法.我还尝试了此(小提琴)，但它不起作用.我知道使用 word-break:break-all ，但这确实很丑.

I have searched around, and my code is using this method. I have also tried this (Fiddle), but it just doesn't work. I am of aware using word-break: break-all, but that is just really ugly.

谢谢.

更新

我正在尝试创建一个导航栏.当前使用的是flexbox，而不是 display:inline-block .我只是(或者至少我以为我做到了)将问题隔离到单个导航元素.显然，并非所有答案都与我最初的导航栏问题相符.抱歉.如果我无法回答我的实际问题，我将保留原始帖子.

I am trying to make a navbar. It is currently using flexbox, not display: inline-block. I just (or at least I thought I did) isolated the problem to single nav element. Apparantly, not all the answers seemed to match my original navbar problem. I'm sorry. I will preserve the original post if I don't get an answer to my actual problem.

推荐答案

来自您的一个链接问题中的此答案: display:table-caption 代替了 inline-block 即可满足您的需求.

From this answer in one of your linked questions: display: table-caption instead of inline-block does what you want.

div {
  max-width: 120px;
  width: auto;
  display: table-caption;

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

<div>Reallylongword test</div>

这篇关于显示:内联块不会使包裹内容的宽度尽可能小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！