如何使元素内容流动并保持最小宽度

Question

我们可以通过显示：inline使元素换行到下一行。 例如，如下图所示

我们如何使内容与保持最小宽度一致。 我们还需要其他元素从前一个元素结束的位置开始。

使用的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;
}

这是小提琴手http://jsfiddle.net/yCvhB/57/

Answer 1

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

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';
}

演示：http://jsfiddle.net/yCvhB/61/