我有几个divs都被设计为内联块,因此彼此相邻排成一排.这些div的大小max-width为140px,并包含导致它们的宽度变化到该大小的文本.
正如max-width你所期望的那样,在这个小提琴中展示的文字比财产更宽.问题是它似乎也迫使它的容器div停留在max-width,即使包装文本在技术上不需要那么多空间.
有没有跨浏览器,HTML/CSS的方法,一旦文本换行,将这些块"收缩包装"到它们的最小宽度？我知道我可以用适当放置的<br>s 强制它,但这些块应该包含用户输入的文本.
.block {
display: inline-block;
vertical-align: top;
max-width: 140px;
background-color: lightgrey;
text-align: center;
}<div class="block">A single line</div>
<div class="block">Two distinctively different lines</div>
<div class="block">A somewhat egregious demonstrative amount of text</div>