Tillitsdone
down Scroll to discover
Mastering CSS white-space Control Text Layouts
Discover how CSS white-space enhances text layouts by managing white space and line breaks.

Learn about options like normal, nowrap, pre, pre-line, pre-wrap, and break-spaces.
thumbnail

Introduction

The CSS white-space property allows precise control over how white space and line breaks are handled within elements. This property determines whether white space should be collapsed, preserved, or wrapped, making it essential for fine-tuning the layout and readability of text content on a webpage. The white-space property provides the flexibility needed to achieve your design goals. This article will delve into the various values of the white-space property, provide practical examples, and discuss browser compatibility.

Specification

The white-space property in CSS is defined in the CSS Text Module Level 3 specification. This property allows developers to control the handling of white space and line breaks within elements, ensuring that text is displayed as intended. The specification outlines the various values that can be used with the white-space property, including normal, nowrap, pre, pre-line, pre-wrap, and break-spaces.

Syntax

The syntax for the CSS white-space property is straightforward and supports a variety of values that determine how white space and line breaks are handled within an element. The basic syntax is as follows:

white-space: normal | nowrap | pre | pre-line | pre-wrap | break-spaces | initial | inherit;

Values

  • normal: Default value. Collapses multiple white space characters into a single space and wraps text as necessary.
  • nowrap: Collapses multiple white space characters into a single space but prevents text from wrapping to the next line.
  • pre: Preserves all white space and line breaks exactly as they appear in the source code, similar to the behavior of the <pre> HTML tag.
  • pre-line: Collapses multiple white space characters into a single space but preserves line breaks and allows text to wrap as necessary.
  • pre-wrap: Preserves all white space and line breaks but allows text to wrap as needed.
  • break-spaces: Similar to pre-wrap, but with additional support for wrapping spaces.
  • initial: Resets the property to its default value (normal).
  • inherit: Inherits the white-space value from the parent element.

Practical Examples

Example 1: Using normal

.example-normal {
white-space: normal;
}

This is the default behavior, where multiple spaces are collapsed into a single space, and text wraps as necessary.

Example 2: Using nowrap

.example-nowrap {
white-space: nowrap;
}

This prevents text from wrapping to the next line, ensuring it stays on a single line until a <br> tag is encountered.

Example 3: Using pre

.example-pre {
white-space: pre;
}

This preserves all white space and line breaks exactly as they appear in the source code, similar to the <pre> HTML tag.

Example 4: Using pre-line

.example-pre-line {
white-space: pre-line;
}

This collapses multiple spaces into a single space but preserves line breaks and allows text to wrap as necessary.

Example 5: Using pre-wrap

.example-pre-wrap {
white-space: pre-wrap;
}

This preserves all white space and line breaks but allows text to wrap as needed.

Example 6: Using break-spaces

.example-break-spaces {
white-space: break-spaces;
}

This is similar to pre-wrap but with additional support for wrapping spaces.

Related Properties

  • overflow-wrap: Specifies whether the browser should insert line breaks within words to prevent overflow.
  • word-break: Specifies how words should break when reaching the end of a line.
  • hyphens: Controls whether hyphenation is allowed to improve the layout of justified text.
  • tab-size: Specifies the width of a tab character in terms of space characters.

Browser Compatibility

The white-space property is widely supported across all major browsers, including Chrome, Firefox, Safari, Edge, and Opera. Always test your CSS in different browsers to ensure consistent behavior.

Conclusion

The CSS white-space property is a powerful tool for controlling how white space and line breaks are handled within elements. By utilizing the various values of this property, developers can fine-tune the layout and readability of text content on their webpages. Combining this property with related CSS properties like overflow-wrap, word-break, hyphens, and tab-size allows for even more precise control over text layout, ensuring visually appealing and functional web designs.

Get in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.