我有几个div都被设计为内联块,因此彼此相邻排成一排.这些div的最大宽度为140px,并包含导致它们的宽度变化到该大小的文本.
As demonstrated in this fiddle,比max-width属性更宽的文本包装,正如您所期望的那样.问题是,它似乎也强制其容器div保持在最大宽度,即使包装文本在技术上不需要那么多空间.
有没有跨浏览器,HTML / CSS的方法,一旦文本换行,将这些块“收缩包装”到它们的最小宽度？我知道我可以用适当放置的< br>来强制它,但这些块应该包含用户输入的文本.
.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>
解决方法
@BoltClock在
https://stackoverflow.com/a/12377883/3903374很好地解释了这个问题
您唯一的选择是JavaScript.
您可以通过缩小每个div的宽度直到其高度变化来实现：
var d = document.querySelectorAll('.block'),i,w,width,height;
for(i = 0 ; i < d.length ; i++) {
width= d[i].offsetWidth;
height= d[i].offsetHeight;
for(w = width ; w ; w--) {
d[i].style.width= w+'px';
if(d[i].offsetHeight !== height) break;
}
d[i].style.width= (w+1)+'px';
}
.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>
