CSS white-space Reminder

I can never seem to remember the nuances of the CSS white-space property and its treatment of source markup with multiple spaces, embedded line breaks and the natural line breaks created due to space limitations of the containing element so I created this simple table to help.

  multiple spaces markup line breaks natural line breaks
normal ignored ignored honoured
nowrap ignored ignored ignored
pre honoured honoured ignored
pre-line ignored honoured honoured
pre-wrap honoured honoured honoured

Here’s a great, in-depth article on the CSS white-space property with lots more information and visual examples from where I got the information for my table.

If anyone has a really simple way to remember this without having to look it up, please share it in the comments Smile


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>