Question

I have a string with multiple lines as below separated by multiple spaces (or sometimes with single space):

"word1   word2       word3   word4
 word5   word same6  word7   word8"

In my Javascript I am able to split using \n, but when I display the same in a CSS div, it ends up in a weird format:

"word1 word2 word3 word4 word5 word same6 word7 word8".

My CSS:

.block{
    color: #000;
    border: 1px solid #fff300;
    padding:8px;
    margin:4px;
    width:80%;
    display: block;
}

How can I format the string with CSS? The spacing is not uniform and there’s no guarantee on the spacing between words (and a word can also have a single space).

Answer 1

in HTML white space is condensed unless the white-space style has been set to a different value.

You might want to add:

white-space: pre;
-or-
white-space: pre-wrap;
-or-
white-space: nowrap;

to get it formatted correctly.