White-space property
Last updated: 2026-09-13
white-space White-space property
The white-space CSS property controls how whitespace (spaces, tabs, and newlines) inside an element is handled and whether the text wraps automatically. It decides whether the browser collapses consecutive spaces, preserves the original formatting, or breaks lines when text overflows. It is essential for displaying code, preserving layout, and single-line ellipsis effects.
| Category | |
|---|---|
| Initial Value | normal |
| Inherited | Yes |
| Applies To | all |
| Animation Type | discrete |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces;⚙️ Values
| Value | Type | Description |
|---|---|---|
normal | nowrap | pre | pre-wrap | pre-line | break-spaces | Keyword | Whitespace handling and wrapping rules |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| white-space | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： A single-line ellipsis requires three properties together: white-space: nowrap, overflow: hidden, and text-overflow: ellipsis.
Important： The difference between pre-wrap and pre-line: pre-wrap preserves all whitespace and wraps; pre-line collapses spaces but keeps newlines, and also wraps.
❓ FAQ
QWhat is the difference between white-space: normal and nowrap?
Anormal collapses consecutive whitespace and lets text wrap at the container edge; nowrap also collapses whitespace but forbids automatic wrapping, so the text keeps extending on one line until it meets a <br> tag.
QWhen should I use white-space: pre versus white-space: pre-wrap?
Apre preserves the original formatting completely and never wraps, making it suitable for displaying code blocks; pre-wrap also preserves formatting but allows wrapping at the container edge, which suits adaptive-width layouts.
QWhat is the difference between white-space: pre-wrap and pre-line?
ABoth allow wrapping. pre-wrap preserves all whitespace, including runs of consecutive spaces; pre-line collapses consecutive spaces and keeps only newlines. Use pre-wrap when indentation must stay exact, and pre-line when you only need to preserve line breaks.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
text-overflow property
Control how overflowing text is shown with an ellipsis.
word-break property
Control the line-breaking rules for words.
