javascript - How to align text like a trapezoid? -

here sample html code

<div style="width:100px;height:100px">     12345 1234 1234 1234 123 12345 1234 1234 123 1234 12345 </div> 

and want effect this:

12345 1234 1234 1234 1234 123 12345 1234 1234 1234 123 1234 12345 

or

12345 123 1234 1234 1234 12345 1234 1234 1234 123 12345 1234 1234 

or

12345 1234 12345  1234 1234 235   12345 123 1234    1234 123 212     123 1234 12      1234 12345 

i have tried using text-align result not expected.

how can effect without adding many of <br> , $nbsp, or adding many of <div style="margin..."> hard code?

thanks.

how can effect without adding many of <br> , &nbsp, or adding many of <div style="margin..."> hard code?

you can't. same goes heart-shaped, giraffe-shaped, etc. dom elements pretty rectangular.

you'l have using javscript. weren't specific on requirements (monospace font, keeping words together, etc.), here 1 example.

<div id="trapezoid" style="width:100px;height:100px"></div>  <script>     var data = '12345 1234 1234 1234 123 12345 1234 1234 123 1234 12345';     var lines = [];     data.split(' ').reduce(function(str, word, i, array) {         str += word;         if(lines.length === 0 || str.length > lines[lines.length-1].length || === array.length - 1) {             lines.push(str);             return '';         }         return str;     }, '');     document.getelementbyid('trapezoid').innerhtml = lines.join('<br>'); </script>