CSS white‑space Property Demo - Online See Wrapping Behavior

The white-space property in CSS controls how whitespace characters (spaces, tabs, and newlines) are handled inside an element. It determines whether whitespace is collapsed (multiple spaces merged into one), whether lines wrap automatically, and whether newline characters are honored. It's essential for controlling text layout, especially when displaying code blocks, poetry, or preventing unwanted line breaks.

There are 6 values:
normal — Collapses whitespace, wraps text, ignores newlines (default).
nowrap — Collapses whitespace, never wraps, ignores newlines.
pre — Preserves all whitespace and newlines, never wraps.
pre-wrap — Preserves all whitespace and newlines, wraps when needed.
pre-line — Collapses spaces but preserves newlines, wraps when needed.
break-spaces — Like pre-wrap, but every space character can be a wrapping point.

normal collapses multiple spaces into a single space and ignores newline characters — text flows as a continuous paragraph. pre-wrap preserves all spaces and newlines exactly as written, while still allowing automatic wrapping at the container edge. Use pre-wrap when you need to preserve formatting (like code or poetry) but still want text to wrap on small screens.

Use white-space: nowrap when you want to prevent text from wrapping to the next line. Common use cases include: navigation menus (keep all items on one line), table headers, button labels, breadcrumb trails, and any UI element where breaking would look awkward. Be cautious — long text will overflow its container, so pair it with overflow: hidden or text-overflow: ellipsis for clean truncation.

pre-line is a hybrid: it preserves newline characters (like pre) but collapses multiple spaces (like normal), and still allows automatic wrapping. It's ideal for displaying user-submitted content where you want to respect paragraph breaks (newlines) but don't care about preserving exact spacing — such as comment sections, message displays, or formatted text from a <textarea>.

break-spaces is similar to pre-wrap but with one key difference: every individual space character can serve as a line-wrapping opportunity. In pre-wrap, trailing spaces at the end of a line may "hang" (not affect layout). With break-spaces, spaces always take up space and the browser can break at any of them. This is useful for preserving exact whitespace layout while still allowing wrapping in tight containers.

When white-space is set to nowrap or pre, text will not break, so it can overflow its container. This is where overflow: hidden, overflow: auto, and text-overflow: ellipsis come into play. For a clean truncated effect, combine: white-space: nowrap; overflow: hidden; text-overflow: ellipsis;. This trio is the classic way to show "..." for overflowing single-line text.

pre-wrap is generally the best choice for displaying code blocks. It preserves indentation and newlines (critical for code readability) while allowing long lines to wrap on small screens. Pure pre can force horizontal scrolling, which is frustrating on mobile. Many code-highlighting libraries use white-space: pre-wrap as their default for responsive code display.