juniorCSS
What does the white-space property do?
Updated Apr 28, 2026
Short answer
It controls how whitespace and line breaks inside an element are handled by the browser.
Deep explanation
By default, browsers collapse multiple spaces into one and wrap text automatically (normal). Using nowrap forces text onto a single line. pre respects exact spaces and line breaks exactly like a <pre> HTML tag.
Real-world example
Ensuring a long username doesn't break onto a second line in a restricted UI header, using ellipsis instead.
Common mistakes
- Using ` 
- ` manually in HTML a hundred times instead of utilizing `white-space: pre`.
Follow-up questions
- What is the difference between pre and pre-wrap?