Tailwind CSS provides word-break utilities to control how words break and wrap within an element. These utilities provide a convenient way to apply the CSS word-break and overflow-wrap properties.
break-normal: Applies normal word-breaking and wrapping rules.break-words: Allows long words to break when necessary to prevent overflow.break-all: Allows words to break at any character when necessary.break-keep: Prevents line breaks within Chinese, Japanese, and Korean (CJK) text. For other languages, it behaves likebreak-normal.
1. break-normal
The break-normal utility applies normal word-breaking and wrapping rules. Text generally wraps at natural break points, such as spaces and hyphens.
Syntax:
<element class="break-normal">...</element>Example:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Word Break</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="p-6">
<h1 class="text-2xl font-bold text-green-600 mb-4">
Tailwind CSS Word Break
</h1>
<div class="w-64 rounded-lg bg-green-200 p-4">
<p class="break-normal">
GeeksforGeeks: Acomputerscienceportalforgeeks
</p>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
2. break-words
The break-words utility allows long words to break when necessary to prevent them from overflowing their container. It applies overflow-wrap: break-word.
Syntax:
<element class="break-words">...</element>Example:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Break Words</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="p-6">
<h1 class="text-2xl font-bold text-green-600 mb-4">
Tailwind CSS Break Words
</h1>
<div class="w-64 rounded-lg bg-green-200 p-4">
<p class="break-words">
GeeksforGeeks: Acomputerscienceportalforgeeks
</p>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
3. break-all
The break-all utility allows words to break at any character when necessary to fit within the container. Unlike break-words, it does not try to preserve whole words when wrapping text.
Syntax:
<element class="break-all">...</element>Example:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Break All</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="p-6">
<h1 class="text-2xl font-bold text-green-600 mb-4">
Tailwind CSS Break All
</h1>
<div class="w-64 rounded-lg bg-green-200 p-4">
<p class="break-all">
GeeksforGeeks: Acomputerscienceportalforgeeks
</p>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
4. break-keep
The break-keep utility prevents line breaks within Chinese, Japanese, and Korean (CJK) text. For other languages, it behaves like break-normal.
Syntax:
<element class="break-keep">...</element>Example:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Break Keep</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="p-6">
<h1 class="text-2xl font-bold text-green-600 mb-4">
Tailwind CSS Break Keep
</h1>
<div class="w-64 rounded-lg bg-green-200 p-4">
<p class="break-keep">
抗衡不屈不挠 这是一个长词，意思是不畏强暴，奋勇抗争。
</p>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
Note: These examples use the Tailwind CSS v4 browser CDN for demonstration. For production projects, use a proper Tailwind CSS build setup.