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
10 views
10 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 General by (0)

Your answer

Preview

Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
By submitting this post you agree to our Terms & Conditions.
To avoid this verification in future, please log in or register.

1 Answer

0 votes
 
Best answer

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 (0)
...