Tailwind CSS Word Break Cheatsheet
Complete reference for Tailwind v4 word-break utilities.
Click any class to copy it to your clipboard.
overflow-wrap: normal; word-break: normal;
Words break at normal word break points (spaces, hyphens). Long words may overflow the container.
Long Word
Supercalifragilisticexpialidocious
Long URL
https://example.com/very/long/path/to/some/resource/that/might/overflow
Mixed Content
This is a paragraph with a very long word: Pneumonoultramicroscopicsilicovolcanoconiosis and some normal text after it.
overflow-wrap: break-word;
Words break only when necessary to prevent overflow. Tries to keep words intact when possible.
Long Word
Supercalifragilisticexpialidocious
Long URL
https://example.com/very/long/path/to/some/resource/that/might/overflow
Mixed Content
This is a paragraph with a very long word: Pneumonoultramicroscopicsilicovolcanoconiosis and some normal text after it.
word-break: break-all;
Words break at any character to prevent overflow. May break words mid-syllable. Best for URLs and long strings.
Long Word
Supercalifragilisticexpialidocious
Long URL
https://example.com/very/long/path/to/some/resource/that/might/overflow
Mixed Content
This is a paragraph with a very long word: Pneumonoultramicroscopicsilicovolcanoconiosis and some normal text after it.
word-break: keep-all;
Prevents word breaks between CJK characters. Words only break at spaces or hyphens. Useful for East Asian text.
Long Word
Supercalifragilisticexpialidocious
Long URL
https://example.com/very/long/path/to/some/resource/that/might/overflow
Mixed Content
This is a paragraph with a very long word: Pneumonoultramicroscopicsilicovolcanoconiosis and some normal text after it.
CJK Text
This text contains Japanese: 吾輩は猫である。名前はまだ無い。
Side-by-Side Comparison
See how each word-break utility handles the same long text in a narrow container.
break-normalSupercalifragilisticexpialidocious
break-wordsSupercalifragilisticexpialidocious
break-allSupercalifragilisticexpialidocious
break-keepSupercalifragilisticexpialidocious
Common Use Cases
Displaying URLs
<a href="..." class="break-all"> https://example.com/very/ long/url/path </a>
Use break-all for URLs to break at any character.
User-Generated Content
<p class="break-words"> User comment with long words like aaaaaaaaaaaaaaaaaa </p>
Use break-words for user content to prevent overflow.
Code/Technical Content
<code class="break-all"> someVeryLongFunctionName OrVariableName </code>
Use break-all for code that may contain long identifiers.
CJK Text
<p class="break-keep"> 日本語のテキスト </p>
Use break-keep for East Asian languages.
Quick Reference Table
| Class | CSS Property | Best For |
|---|---|---|
break-normal | overflow-wrap: normal; word-break: normal; | Normal text, default behavior |
break-words | overflow-wrap: break-word; | User content, preserves words when possible |
break-all | word-break: break-all; | URLs, code, long strings without spaces |
break-keep | word-break: keep-all; | CJK text, keeping words together |
Frequently Asked Questions
What is the difference between break-words and break-all?
break-words (overflow-wrap: break-word) only breaks words when necessary to prevent overflow, trying to keep words intact. break-all (word-break: break-all) breaks words at any character to prevent overflow, which can break words mid-syllable. Use break-words for general content and break-all for URLs or technical strings.
When should I use break-keep?
break-keep is primarily useful for CJK (Chinese, Japanese, Korean) text where you want to prevent word breaks between characters. It keeps words together and only breaks at natural breakpoints like spaces or hyphens.
How do I handle long URLs in Tailwind CSS?
Use break-all to break URLs at any character. This is usually the best choice for URLs since they don't contain natural break points like spaces. Example: <a class="break-all" href="...">Long URL</a>
Can I combine word-break with other text utilities?
Yes! Word-break utilities work well with other text utilities like truncate, text-ellipsis, whitespace-nowrap, and overflow-hidden for complex text handling scenarios.
What is the default word-break behavior in browsers?
The default is equivalent to break-normal, where words break only at allowed break points (spaces, hyphens). Long words without break points will overflow their container.
About Word Break Utilities
Tailwind's word-break utilities control how text breaks when it reaches the edge of its container. These are essential for handling user-generated content, URLs, and internationalized text.
Related utilities include truncate for single-line overflow, whitespace-* for controlling whitespace handling, and hyphens-* for automatic hyphenation.
Combine with responsive prefixes for different behavior at different screen sizes:break-normal md:break-words
Explore more Tailwind tools
Tailwind Grid Generator
Create grid layouts visually
Tailwind Flexbox Generator
Create flex layouts visually
Tailwind Gradient Generator
Create custom gradients
Tailwind Text Gradient
Gradient text effects
Tailwind Gradients Collection
275+ ready-to-use gradients
Tailwind Colors
Complete 240+ color palette
Tailwind Box Shadow Generator
Design multi-layer shadows
Tailwind Text Shadow
Add depth to text with shadows
Tailwind Filter Generator
Apply blur, brightness & more
Tailwind Transform Generator
Rotate, scale & translate elements
Tailwind Animation Generator
Create built-in & custom animations
Tailwind Transition Generator
Smooth hover transitions
Tailwind Config Generator
Generate your config file
Tailwind Input Generator
Design form inputs visually
Tailwind Class Sorter
Organize classes in order
Flexbox Cheatsheet
All flex utilities visualized
Overflow Cheatsheet
Control content overflow