CSS
HTML
COMPONENTS
CODE HUB
CSS White Space Generator
Configuration
White Space
Class
Preview
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Code
ReadyTools Academy
Learn HTML, CSS, and JavaScript for free with the ReadyTools Academy.
Track your learning, grow at your own pace, and enjoy the journey! 🎯
Get StartedCSS White Space Generator
In CSS, the white-space property is used to control how white space (spaces, tabs, and line breaks) is handled within an HTML element. It allows you to control how text content is wrapped, truncated, or displayed in relation to spaces and line breaks.
The white-space property can take the following values:
normal: Text is displayed with standard whitespace handling, and any sequences of consecutive white space are collapsed into a single space.
.normal-spacing {
white-space: normal;
}
nowrap: Text does not wrap to the next line, and long lines will overflow the container or be truncated.
.no-wrap-text {
white-space: nowrap;
}
pre: Text is displayed exactly as it is in the HTML source code, preserving white space, line breaks, and multiple spaces.
.preformatted-text {
white-space: pre;
}
pre-line: Text is displayed with normal whitespace handling, but line breaks are preserved.
.pre-line-text {
white-space: pre-line;
}
pre-wrap: Text is displayed with both whitespace and line breaks preserved.
.pre-wrap-text {
white-space: pre-wrap;
}
The white-space property is commonly used to format text within HTML elements, especially for displaying code, preformatted text, or other content that requires specific whitespace handling. It's a useful tool for ensuring text is presented in a way that best fits the desired layout and design of a webpage.