Guidelines

This site is for tech Q&A. Please keep your posts focused on the subject at hand.

Ask one question at a time. Don't conflate multiple problems into a single question.

Make sure to include all relevant information in your posts. Try to avoid linking to external sites.

Links to documentation are fine, but in addition you should also quote the relevant parts in your posts.

0 votes
72 views
72 views

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.

in Sysadmin
by (100)
1 4 18
edit history

Please log in or register to answer this question.

1 Answer

0 votes
 

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.

by (100)
1 4 18
edit history
...