Display multiple text lines of equal length

Question

I would like multiple lines of text to break/word wrap so it appears in a perfect box. The text isn't a string, rather it's composed of individual chars joined together, as such: <span>L</span>

I've tried this CSS, but I get the result that you see on the left...

body { 
    font-family: monospace;
    width: 200px;
    word-wrap: break-word;
    display: inline-block;
}

I've also tried text-align: justify; with no success.

Answer 1

The CSS answers provided work somewhat, but do not ensure each line is definitely composed of n characters, thus getting that even line look. I went with inserting a <br/> after every n chars. Something like:

for (;;) {
    if (counter >= n) {
            myDiv.appendChild(document.createElement("br"));
            counter = 0;
    }
    counter++;
    myDiv.appendChild(span);
 }