我有几个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>