If you have ever created a web application where users have the ability to post html on your site, you are probably aware of some minor challenges with preserving your user's line breaks in thier content. This sort of requirement comes when you allow comments or any other sort of user entered information. There are many ways you can accomplish this. One of the more common ways I have seen is to use regex to parse out the returns and line feeds into actual html breaks. If you look around you might even see code that looks a lot like this:
It works, sure, but did you know that you can accomplish this same trick to preserve line breaks in a much more elegant way using CSS? It's true, you can use the white-space property in CSS. Here is the same sample but this time using:
white-space: pre-line; and no jQuery.
There are even some property values of white-space in CSS that allow you to preserve the white space too. That use case is certainly less common though. Here is a list of the options available pulled from w3schools.com