word-break

Definition

The word-break CSS property is used to control how words are broken and wrapped when they exceed the available width of their container. It specifies the behavior of line breaks within words, allowing you to control whether words should break at the end of a line or if they should be wrapped onto the next line.

The word-break property accepts the following values:

• normal: This is the default value. Words break only at allowed break points, such as hyphens or soft hyphens. If no hyphenation opportunities are available, the word is not broken and may overflow the container.
• break-all: Words can break at any character, even if there are no explicit hyphens or soft hyphens. This can result in words being broken in the middle if they exceed the container width.
• keep-all: Words are not broken, even if they exceed the container width. This is particularly useful for scripts such as East Asian languages where line breaks are not typically used within words.

Here’s an example:

.long-words {
  word-break: break-all;
}

In this example, the .long-words class sets the word-break property to break-all, allowing words to break at any character if they exceed the container width.

It’s important to note that the word-break property affects only how words are broken within a single line. For multi-line text, the overflow-wrap or word-wrap property is typically used to handle word wrapping.

The word-break property is commonly used in cases where you need more control over word breaking, such as dealing with long URLs or strings without spaces. By specifying break-all, you ensure that words can break at any character, allowing for better fit within the container. However, it’s important to consider the impact on readability and design, as breaking words in the middle may affect legibility or disrupt the visual flow of the text.

Syntax

.table-cell {
  word-break: break-all;
}

Values

• normal: use language-specific line breaking rules.
• break-all: break words at arbitrary points to prevent overflow.
• keep-all: prevent breaking CJK text into individual characters (keep words intact).
• break-word: legacy alias for overflow-wrap: break-word.

Practical Examples

.table-cell {
  word-break: break-all;
}

Use for tables or code snippets containing extremely long tokens.

<div class="grid gap-4 sm:grid-cols-2 text-sm text-slate-700">
  <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm" style="max-width: 16rem;">https://verylongdomainnamewithoutbreakpoints.com/path/to/resource</div>
  <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm" style="max-width: 16rem; word-break: break-all;">https://verylongdomainnamewithoutbreakpoints.com/path/to/resource</div>
</div>

Tips & Best Practices

• Prefer overflow-wrap unless legacy browser support demands word-break.
• Use keep-all for East Asian typography to avoid awkward single-character lines.
• Scope aggressive breaking to specific components like table cells or code labels.

Accessibility & UX Notes

Aggressive breaks can harm readability; reserve for emergency overflow handling.

Browser Support

Broadly supported, with break-word treated as alias for overflow-wrap: break-word in modern browsers.

Related

• overflow-wrap for softer wrapping behaviour.
• white-space to control overall wrapping rules.
• hyphens for natural word breaks.