Javascript 如何使元素内容在保持最小宽度的同时流动

我们可以通过显示：inline将元素换行到下一行。 对于eg，如下图所示

我们如何在保持最小宽度的同时使内容换行。 我们还需要其他元素从前面元素结束的地方开始。

使用的css是：

 span.block {
                display:inline;
                width:auto;
                min-width:20%;
                border:1px solid #cfcfcf;
                line-height:25px;
                margin:3px;
                background-color:#3f3f3f;
                color:#f1f1f1;
                border-radius:3px;
                padding-right:20px;
}

---

这里是fiddler

我能想到的唯一解决方案是添加尽可能多的空格，使元素足够长

var minWidth = 300;

var blocks = document.getElementsByClassName( 'block' );
var numOfBlocks = blocks.length;

for( var i = 0; i < numOfBlocks; ++i ) {
    var block = blocks[ i ];

    // make text not wrap temporarily so that the width is
    // calculated correctly
    block.style.whiteSpace = 'nowrap';

    while( block.offsetWidth < minWidth ) {
        block.innerHTML += ' &nbsp;';
    }

    // reset whitespace style    
    block.style.whiteSpace = 'normal';
}

var minWidth=300；
var blocks=document.getElementsByClassName（'block'）；
var numoblocks=blocks.length；
对于（变量i=0；i

---

演示：

如果下一行只有一个空的黑条，如果文本与上一行匹配，但整个500px不匹配，这难道不是很愚蠢吗？我们给出的500px只是一个例子。考虑它是30px或%。这是你需要的吗？更改

显示：内联至
显示：内联块生成内联块将不允许下一项内容从上一个元素末尾的同一行开始下一项内容将从上一个元素末尾开始，仅当剩余宽度至少有500px的空白空间时，才能满足
最小宽度：500这是您的要求。你到底想从
最小宽度：500px
中得到什么？这对于px来说很酷，但是当我们以百分比形式给出最小宽度时，如何使其工作你必须计算百分比的像素值（参考元素的宽度乘以百分比）。不幸的是，如果用户在加载页面后调整浏览器窗口的大小，就没有简单的方法使其工作。