Tailwind CSS - Word Break

Tailwind CSS - Word Break & Text Wrapping

Controlling how text wraps and breaks is essential for creating robust and readable layouts. Tailwind provides a set of utilities to manage word breaks, which is particularly useful for handling long, unbreakable strings like URLs or user-generated content.

Word Breaking & Wrapping Utilities

Below is a list of modern utilities for controlling text flow, including the classic word-break properties and new text-wrapping utilities for improved typography.

Class	CSS Properties	Use Case
break-normal	overflow-wrap: normal; word-break: normal;	Default browser behavior. Breaks text at normal word breaks (like spaces).
break-words	overflow-wrap: break-word;	Allows long, unbreakable words to wrap to the next line without breaking mid-character unless necessary.
break-all	word-break: break-all;	Forces words to break at any character to prevent overflow. Can harm readability.
break-keep	word-break: keep-all;	Prevents word breaks. Crucial for CJK (Chinese, Japanese, Korean) languages where breaking a word can change meaning.
truncate	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;	Truncates overflowing text on a single line with an ellipsis (…).
text-wrap	text-wrap: wrap;	Default wrapping behavior. Same as break-normal.
text-nowrap	text-wrap: nowrap;	Prevents text from wrapping onto multiple lines.
text-balance	text-wrap: balance;	Balances text across multiple lines to avoid single-word orphans. Ideal for headlines.
text-pretty	text-wrap: pretty;	Improves text layout for readability, preventing orphans in a less aggressive way than text-balance. Ideal for body text.

Example: Handling Different Text Scenarios

This example demonstrates how each utility affects text rendering within a constrained container.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8 font-sans">
  <div class="max-w-2xl mx-auto space-y-8">

    <div>
      <h3 class="font-bold mb-2">`break-words` (for long URLs)</h3>
      <p class="w-full max-w-xs p-4 bg-white shadow rounded break-words">
        Check out this link: https://thisisaverylongandunbreakableurlthatwouldotherwiseoverflowitscontainer.com/some/path
      </p>
    </div>

    <div>
      <h3 class="font-bold mb-2">`break-all` (use with caution)</h3>
      <p class="w-full max-w-xs p-4 bg-white shadow rounded break-all">
        Thisisaverylongandunbreakablewordthatwillbebrokenatanycharacterpoint.
      </p>
    </div>

    <div>
      <h3 class="font-bold mb-2">`truncate` (for single lines)</h3>
      <p class="w-full max-w-xs p-4 bg-white shadow rounded truncate">
        This very long line of text will be truncated with an ellipsis when it overflows its container.
      </p>
    </div>

    <div>
      <h3 class="font-bold mb-2">`text-balance` (for headlines)</h3>
      <h2 class="w-full max-w-xs p-4 bg-white shadow rounded text-2xl font-bold text-center text-balance">
        This heading is perfectly balanced to look great.
      </h2>
    </div>

  </div>
</body>
</html>

Best Practices & Accessibility

• Use break-words for safety: It’s a great choice for containers with user-generated content to prevent layout breaking.
• Prefer text-balance for headings: It significantly improves typography by avoiding awkward single-word lines (orphans).
• Avoid break-all unless necessary: Breaking words mid-character can severely impact readability. Use it only as a last resort for things like long, non-hyphenated identifiers in a table.
• Remember CJK languages: Use break-keep when working with content in Chinese, Japanese, or Korean to ensure semantic correctness.