The handling method of whitespace characters

Whitespace characters in CSS are an easily overlooked but extremely important concept. They include spaces, tabs, line breaks, etc., and directly affect the layout of elements and the rendering of text. Different CSS properties handle whitespace characters in various ways, and understanding these differences helps in better controlling page presentation.

The white-space Property

The white-space property determines how whitespace characters inside an element are handled. It has the following commonly used values:

.normal {
  white-space: normal; /* Default value, collapses whitespace, converts line breaks to spaces */
}

.nowrap {
  white-space: nowrap; /* No wrapping, collapses whitespace */
}

.pre {
  white-space: pre; /* Preserves whitespace, wraps only at line breaks and <br> */
}

.pre-wrap {
  white-space: pre-wrap; /* Preserves whitespace, normal wrapping */
}

.pre-line {
  white-space: pre-line; /* Collapses whitespace, preserves line breaks */
}

.break-spaces {
  white-space: break-spaces; /* Similar to pre-wrap but breaks at any whitespace */
}

Whitespace Collapsing

When the white-space value is normal or nowrap, the browser collapses consecutive whitespace characters:

<div style="white-space: normal;">
  Here    are    many    spaces
</div>

The rendered result will be: "Here are many spaces," with all consecutive spaces collapsed into one.

Preserving Whitespace

Using the pre value preserves whitespace characters exactly as in the source code:

<pre style="white-space: pre;">
  The    spaces    here
  are    fully    preserved
</pre>

Text Wrapping Behavior

The difference between pre-wrap and pre-line lies in how whitespace is handled:

.pre-wrap-example {
  white-space: pre-wrap;
  width: 100px;
  border: 1px solid #ccc;
}

.pre-line-example {
  white-space: pre-line;
  width: 100px;
  border: 1px solid #ccc;
}

<div class="pre-wrap-example">
  The    spaces    here    are    preserved
  but    the    text    wraps    at    container    boundaries
</div>

<div class="pre-line-example">
  The    spaces    here    are    collapsed
  but    line    breaks    are    preserved
</div>

Whitespace and Flexbox

In flex layouts, whitespace affects item arrangement:

<div style="display: flex; width: 300px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <!-- There are line breaks and indentation here -->
  <div>Item 3</div>
</div>

These whitespace characters are rendered as spaces, potentially causing unexpected gaps. Solutions include:

• Removing whitespace from the HTML
• Setting the parent's font-size: 0 and resetting child font sizes
• Wrapping whitespace in comments

Whitespace and Grid Layout

In grid layouts, whitespace has similar effects as in flexbox:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

<div class="grid-container">
  <div>Item 1</div><div>Item 2</div><div>Item 3</div>
  <!-- No whitespace -->
</div>

<div class="grid-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <!-- Line break whitespace -->
</div>

Text Overflow Handling

Whitespace handling directly affects text overflow behavior:

.overflow-example {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="overflow-example">
  This long text will be truncated with an ellipsis
</div>

Whitespace and Pseudo-elements

Whitespace in pseudo-elements also requires attention:

.button::before {
  content: "  \2190  "; /* Unicode arrow with spaces */
  white-space: pre;
}

Whitespace and CSS Counters

Whitespace affects output formatting when using counters in generated content:

ol {
  counter-reset: item;
}
li {
  display: block;
}
li::before {
  content: counter(item) ".  "; /* Note the spaces */
  counter-increment: item;
  white-space: pre;
}

Whitespace and Typography

Some fonts render whitespace differently:

.monospace {
  font-family: monospace;
  white-space: pre;
}

<div class="monospace">
  The    spaces    here    have    fixed    width
</div>

Whitespace in Responsive Design

Whitespace handling may need adjustment for different screen sizes:

@media (max-width: 600px) {
  .responsive-text {
    white-space: normal;
  }
}
@media (min-width: 601px) {
  .responsive-text {
    white-space: nowrap;
  }
}

Whitespace and Internationalization

Different languages may have special requirements for whitespace handling:

.cjk-text {
  word-break: keep-all;
  white-space: normal;
}

Performance Considerations with Whitespace

Excessive whitespace can impact rendering performance, especially with pre or pre-wrap:

.performance-optimized {
  white-space: pre-wrap;
  tab-size: 2; /* Controls tab width */
}

Whitespace and CSS Variables

Combining with CSS variables allows dynamic control of whitespace handling:

:root {
  --text-wrap: pre-wrap;
}

.dynamic-whitespace {
  white-space: var(--text-wrap);
}