The processing rules for blanks and line breaks

Handling Rules for Whitespace and Line Breaks

The processing rules for whitespace and line breaks in HTML directly affect page rendering. Browsers have specific parsing methods for whitespace characters such as spaces, tabs, and line breaks in the source code. Understanding these rules is crucial for precise layout control.

Basic Types of Whitespace Characters

Common whitespace characters in HTML include:

• Space ( )
• Tab (\t)
• Line feed (\n)
• Carriage return (\r)
• Non-breaking space ( )

<p>This text contains   multiple spaces and
line breaks</p>

Default Processing Rules

By default, browsers compress consecutive whitespace characters into a single space:

<div>
  Leading spaces
  Multiple   spaces in between
  Trailing spaces
</div>

The rendered result will display as: "Leading spaces Multiple spaces in between Trailing spaces," with all line breaks and extra spaces compressed.

Special Handling of the pre Element

The <pre> tag preserves the original formatting of all whitespace characters:

<pre>
  Preserved    spaces
  and
  line breaks
</pre>

CSS white-space Property

CSS allows precise control over whitespace handling:

.nowrap {
  white-space: nowrap; /* Prevent line breaks */
}
.prewrap {
  white-space: pre-wrap; /* Preserve whitespace and line breaks */
}
.preline {
  white-space: pre-line; /* Collapse spaces but preserve line breaks */
}

Whitespace Handling in Inline Elements

Line breaks between inline elements are converted to spaces:

<span>First</span>
<span>Second</span> <!-- Renders with a space in between -->

Handling in JavaScript

Be mindful of whitespace characters in JavaScript string operations:

const text = document.querySelector('div').textContent;
console.log(text.length); // May include invisible whitespace characters

Common Problem Solutions

Solutions for whitespace issues in layouts:

1. Eliminating gaps between inline-block elements:

.container {
  font-size: 0; /* Remove whitespace nodes */
}
.container > * {
  font-size: 16px;
}

2. Using comments to eliminate whitespace:

<div><!--
  --><span>Content 1</span><!--
  --><span>Content 2</span><!--
--></div>

Whitespace in Template Literals

Whitespace handling in modern frontend framework template literals:

const html = `
  <div>
    <p>Multiline template string</p>
  </div>
`; // Preserves indentation whitespace

Server-Side Rendering Considerations

When generating HTML on the server:

function renderComponent(props) {
  return `
    <div class="component">
      ${props.text}
    </div>
  `.replace(/\s+/g, ' ').trim(); // Compress whitespace
}

Mobile-Specific Scenarios

Long text handling on mobile devices:

.mobile-text {
  word-break: break-all;
  white-space: normal;
  overflow-wrap: anywhere;
}

Accessibility Impact

Screen reader handling of whitespace:

<button>Submit<span aria-hidden="true"> </span>Form</button>
<!-- Explicitly preserves pauses in speech -->

Regular Expression Matching

Whitespace matching when processing HTML strings:

const cleanHTML = html.replace(/>\s+</g, '><'); // Remove whitespace between tags

Build Tool Preprocessing

Whitespace handling in tools like webpack:

// webpack configuration
module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/,
        loader: 'html-loader',
        options: {
          minimize: {
            collapseWhitespace: true
          }
        }
      }
    ]
  }
}

Email HTML Specifics

Special considerations for email templates:

<table role="presentation" cellspacing="0" cellpadding="0">
  <tr>
    <td style="font-size:0;line-height:0;">&nbsp;</td>
  </tr>
</table>
<!-- Use empty table cells to control spacing -->

Whitespace in Responsive Design

Adjusting whitespace in media queries:

@media (max-width: 768px) {
  .responsive-text {
    white-space: normal;
    letter-spacing: -0.5px;
  }
}

Dynamic Content Whitespace Control

Adjusting dynamically via JavaScript:

element.style.whiteSpace = isExpanded ? 'normal' : 'nowrap';

Internationalization Text Handling

Whitespace needs for different languages:

:lang(ja) {
  word-break: keep-all;
  white-space: normal;
}

Print Style Whitespace Optimization

Ensuring proper whitespace handling for printing:

@media print {
  .print-area {
    white-space: pre-wrap;
    page-break-inside: avoid;
  }
}