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