javascript - min-width を維持しながら要素コンテンツの流れを作る方法

Question

display : 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/