CSS White Space
BLUF: Styling is what brings the web to life, and mastering CSS White Space is key to creating beautiful, responsive interfaces. This tutorial breaks down the concepts and syntax you need to succeed with CSS.
Visual Design Hack: CSS White Space
CSS is all about presentation. Discover how CSS White Space works to transform plain HTML into a premium user experience in the guide below.
The CSS white space property is used to specify how to display the content within an element. It is used to handle the white spaces inside an element .
CSS White Space values
There are many white space values that can be used to display the content inside an element.
| Value | Description |
|---|---|
| normal | This is a default value. in this value, text is wrapped when necessary. sequences of white space will collapse into a single whitespace. |
| nowrap | Sequences of white space will collapse into a single whitespace. in this value, text will never wrap to the next line and only break when <br> tag is used. |
pre |
Whitespace is preserved by the browser. it is act like html <pre> tag. text will only wrap on line breaks. |
| pre-line | Sequences of white space will collapse into a single whitespace. texts are wrapped when necessary, and on line break. |
| pre-wrap | Whitespace is preserved by the browser. texts are wrapped when necessary, and on line break. |
| initial | It sets this property to its default value. |
| inherit | It inherits this property from its parent element. |
CSS White Space Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
white-space: nowrap;
}
</style>
</head>
<body>
<p>
Write some text..Write some text..Write some text..
Write some text..Write some text..Write some text..
Write some text..Write some text..Write some text..
Write some text..Write some text..Write some text..
Write some text..Write some text..Write some text..
</p>
</body>
</html>
