显示相同长度的多个文本行

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

I suppose this is what you want: http://jsfiddle.net/bL50ow0b/1/ ?

text-align: justify is what you need then.

Answer 2

It's hard to understand what you mean regarding the span vs. string, if you posted your text that would be easier.

Both versions work for me in this fiddle: https://jsfiddle.net/eq994mpu/1/ using the following code:

p {
    width:50px;
    word-wrap:break-word;
}

Answer 3

To achieve this you need to add this code:

body {
    width:500px;
    text-align: justify;
}

Answer 4

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