Wrap text at all whitespace

Question

I have HTML text like this:

<p>Lorem ipsum dolor sit amet.</p>

and want to wrap it after each word using just CSS. The result should look like this:

Lorem
ipsum
dolor
sit
amet.

The white-space property only controls if/how lines are wrapped at element boundaries, not individual words, and the word-wrap property controls how long words are wrapped across lines, not wrapping a line after each word.

I'd prefer to avoid fiddling with the element size or padding, as that might impact the page layout.

Answer 1

Set the word-spacing property to some ridiculously high value that couldn't possibly fit into the element in question.

p {
  word-spacing: 10000px;
}

That will cause the browser to display each word on a new line.