问题描述
我有一个 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>
这篇关于显示:内联块不会使包裹内容的宽度尽可能小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!