Text wrapping rules

Line breaking in CSS is a crucial mechanism for controlling how content wraps within containers, particularly in responsive design where it directly impacts layout flexibility and readability. Different properties offer fine-grained handling for scenarios involving Western languages, CJK characters, hyphens, and more.

Basic Line Breaking Behavior

By default, browsers handle whitespace and line breaks according to the white-space property. Common values include:

.normal {
  white-space: normal; /* Collapses whitespace, auto-wraps */
}
.nowrap {
  white-space: nowrap; /* Forces no wrapping */
}
.pre {
  white-space: pre; /* Preserves whitespace, only source line breaks apply */
}

Word and Character Breaking Control

word-break and overflow-wrap are core properties for handling long words or continuous characters:

.break-all {
  word-break: break-all; /* Breaks at any character */
}
.keep-all {
  word-break: keep-all; /* Prevents wrapping in CJK text */
}
.wrap-break {
  overflow-wrap: break-word; /* Breaks words when overflowing */
}

Typical use case comparisons:

1. Long URLs: overflow-wrap: anywhere allows breaking at any point
2. Japanese text: word-break: keep-all avoids breaking within kana
3. Number sequences: word-break: break-all forces number strings to wrap

Hyphenation Optimization

The hyphens property enables automatic hyphen insertion:

.hyphenate {
  hyphens: auto;
  lang: "en"; /* Language must be specified */
}

For cross-browser support, combine with soft hyphens (­):

<p>super&shy;cali&shy;fragilistic&shy;expiali&shy;docious</p>

Text Direction and Wrapping

writing-mode affects the base direction of line breaking:

.vertical {
  writing-mode: vertical-rl; /* Vertical text, right-to-left */
}
.horizontal-tb {
  writing-mode: horizontal-tb; /* Default horizontal */
}

Notes for vertical text:

• Latin characters rotate 90° clockwise
• Line boxes stack vertically
• text-orientation controls character orientation

Wrapping in Multi-column Layouts

column layouts require special handling:

.multicol {
  column-width: 10em;
  word-wrap: break-word;
  hyphens: auto;
}

Common issues include:

• Images and tables breaking across columns
• Headings being separated from content
• Column gaps causing abnormal wrapping

Responsive Breakpoint Strategies

Dynamically adjust wrapping rules via media queries:

@media (max-width: 480px) {
  .responsive {
    word-break: break-all;
    line-break: loose;
  }
}
@media (min-width: 1200px) {
  .responsive {
    hyphens: auto;
    overflow-wrap: normal;
  }
}

CJK Text Special Handling

East Asian text requires additional considerations:

.cjk-text {
  line-break: strict; /* Follows strict wrapping rules */
  word-break: keep-all; /* Maintains word integrity */
  text-spacing: trim-auto; /* Adjusts punctuation spacing */
}

Practical examples:

• Chinese punctuation avoidance: Controlled via text-spacing
• Japanese kana ligatures: line-break: normal allows kana breaks
• Korean syllable division: word-break: keep-all preserves jamo clusters

Dynamic Content Wrapping

Trigger reflow when inserting content via JavaScript:

function insertTextWithWrap(container, text) {
  const span = document.createElement('span');
  span.style.whiteSpace = 'pre-wrap';
  span.textContent = text;
  container.appendChild(span);
  // Force reflow
  void container.offsetHeight;
}

Performance Considerations

Frequent line breaking calculations cause layout thrashing:

1. Fix container dimensions to reduce reflows
2. Avoid combining nowrap with dynamic widths
3. Use content-visibility: auto for long lists

.optimized-wrap {
  contain: strict;
  width: 50vw;
  content-visibility: auto;
}

Browser Compatibility Solutions

Fallback strategies for older browsers:

.legacy-wrap {
  word-wrap: break-word; /* Legacy property */
  overflow-wrap: break-word; /* Standard property */
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

Typical polyfill approaches:

1. Use <wbr> tags to manually specify break points
2. Detect browser support via JavaScript
3. Insert soft hyphens for browsers without hyphens support

Accessibility Impact

Poor wrapping can disrupt screen reader parsing:

1. Avoid breaking abbreviations mid-word
2. Keep numbers and units on the same line
3. Prevent link text from splitting across lines

WCAG recommendations:

.a11y-links {
  display: inline-block;
  max-width: 100%;
}

Print Media Adaptation

Special handling for pagination in print:

@media print {
  .print-wrap {
    page-break-inside: avoid;
    orphans: 3;
    widows: 2;
  }
}

Key parameters:

• orphans sets minimum lines before a page break
• widows sets minimum lines after a page break
• page-break-before forces page breaks

Future Standards Evolution

CSS Text Level 4 introduces new features:

.future-wrap {
  text-wrap: balance; /* Smart multi-line balancing */
  wrap-after: avoid; /* Avoid breaks after specific elements */
  line-clamp: 3; /* Multi-line truncation */
}

Experimental properties include:

• text-spacing-trim for punctuation compression
• Enhanced behavior for overflow-wrap: anywhere
• hyphenate-character for custom hyphen styles