Line Break on Space

Question

Is it possible to have CSS treat spaces as line breaks? I have HTML like:

<li>This and That</li>

I would like it to be displayed like:

This
and
That

Answer 1

You can try styling it with

width: 0;

together with the default overflow: visible, it will produce that effect. Demo

But note that forcing overflow may produce undesired behavior.

Edit: Using it together with display: table (instead of block) or display: inline-table (instead of inline-block) can fix those problems.

Answer 2

You can also do that with defined widths by doing

li {
    width: 100px;
    word-spacing: 100px;
    list-style: none;
}

Here is the fiddle