How do you wrap or prevent wrapping of text in a container?
Controlling Text Wrapping in CSS
CSS provides properties to control whether text wraps inside a container or stays on a single line. This is useful for UI elements like buttons, cards, table cells, or headers.
- 1
white-space: normal;– Default behavior. Text wraps to a new line as needed. - 2
white-space: nowrap;– Prevents text from wrapping; text stays on a single line. - 3
white-space: pre;– Preserves whitespace and line breaks exactly as in the source. - 4
white-space: pre-wrap;– Preserves whitespace and line breaks, but wraps long lines. - 5
white-space: pre-line;– Collapses multiple spaces into one but preserves line breaks.
In the .no-wrap example, text stays on a single line and overflows are hidden or truncated. In the .wrap example, long text wraps naturally to fit the container width.
- 1
Use
nowrapto prevent wrapping for single-line elements like buttons or labels. - 2
Use
normalorpre-wrapfor paragraphs or multi-line text that should adjust to container width. - 3
preandpre-lineare useful for preformatted text, code snippets, or content where line breaks matter. - 4
Combine with
overflowandtext-overflowfor controlled truncation in fixed-size containers.