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













