Webdev Recipes - Formatting Line Breaks in Plain Text

Problem: Your user has entered text with line breaks, and you want to preserve the formatting.

Solution: Use the white-space css property.

By default white space is collapsed, but the white-space property gives you control over how it is displayed.

If you want to preserve line breaks only, use white-space: pre-line. Alternatively, to keep indentation and consecutive spaces, but allow lines to wrap, use white-space: pre-wrap. Otherwise you can always just use a pre tag.

This is supported in all your favorite browsers and IE8.

See the W3's CSS3 Draft for more details.

Demo:

Pre-Line

Pre-Wrap

blog comments powered by Disqus
Monkey Small Crow Small