javascript - How to make the element content flow along with maintaining min-width -

we can make element wrap next line making display : inline. eg shown in image below

how can make content wrap line along maintaining min-width. need other elements start previous element ends.

the css used :

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

here fiddler http://jsfiddle.net/ycvhb/57/

the solution think of add many spaces takes make element long enough.

var minwidth = 300;  var blocks = document.getelementsbyclassname( 'block' ); var numofblocks = blocks.length;  for( var = 0; < numofblocks; ++i ) {     var block = blocks[ ];      // make text not wrap temporarily width     // calculated correctly     block.style.whitespace = 'nowrap';      while( block.offsetwidth < minwidth ) {         block.innerhtml += ' &nbsp;';     }      // reset whitespace style         block.style.whitespace = 'normal'; } 

demo: http://jsfiddle.net/ycvhb/61/