css
  1. css-white-space
PreviousNext

CSS White Space

The white-space property in CSS controls how white space within an element is handled, such as spaces, tabs, and line breaks.

Basic Usage of the white-space Property

The white-space property can take several values:

  • white-space: normal;: Default behavior, sequences of spaces and tabs are collapsed to a single space. Line breaks wrap content as necessary.
  • white-space: nowrap;: Collapses white space as in normal, but does not allow line breaks.
  • white-space: pre;: Preserves white space formatting exactly as in the HTML code.
  • white-space: pre-wrap;: Preserves white space and allows wrapping.
  • white-space: pre-line;: Collapses multiple spaces into a single space, but preserves line breaks.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .content {
    white-space: nowrap;
  }
</style>
</head>
<body>

<div class="content">This content will not break into a new line and will keep all the spaces.</div>

</body>
</html>
Try Playground

Benefits of Using white-space Property

  • Text Control: Allows for control over how white space is handled within elements.
  • Formatting Preservation: Maintains the formatting of text as per HTML code or custom settings.

Best Practices for Using white-space

  • Content Formatting: Choose the white-space value based on the formatting requirement of the text content.
  • User Experience: Consider readability and legibility when choosing how white space is handled in elements.

Understanding the white-space property provides control over how white space and line breaks are managed within elements, improving the readability and presentation of textual content in web design.

Box-SizingWord Break
Published on: