Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to define word-break property to allow words to be continued to the next line in CSS?
The CSS word-break property controls how words should break when they reach the edge of their container. This property is essential for maintaining readable text layouts, especially when dealing with long words or narrow containers that might cause text overflow.
Syntax
selector {
word-break: value;
}
Possible Values
| Value | Description |
|---|---|
normal |
Default behavior - words break at natural break points |
break-all |
Words can break at any character to prevent overflow |
keep-all |
Prevents word breaks for CJK (Chinese, Japanese, Korean) text |
Example: Using break-all Value
The following example demonstrates how word-break: break-all allows long words to break at any point to fit within the container
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
border: 2px solid #333;
padding: 15px;
margin: 20px;
font-family: Arial, sans-serif;
}
.normal-break {
word-break: normal;
background-color: #f0f0f0;
margin-bottom: 10px;
}
.break-all {
word-break: break-all;
background-color: #e6f3ff;
}
</style>
</head>
<body>
<div class="container normal-break">
<h4>Normal (Default)</h4>
<p>This is a supercalifragilisticexpialidocious example of very long words.</p>
</div>
<div class="container break-all">
<h4>Break-all</h4>
<p>This is a supercalifragilisticexpialidocious example of very long words.</p>
</div>
</body>
</html>
Two containers appear side by side. The first container with normal word-break shows the long word "supercalifragilisticexpialidocious" overflowing beyond the container width. The second container with break-all shows the same word broken across multiple lines within the container boundaries.
Example: Comparing Different Values
This example shows the difference between normal and break-all values in handling text overflow
<!DOCTYPE html>
<html>
<head>
<style>
.text-box {
width: 150px;
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
font-size: 14px;
}
.normal { word-break: normal; }
.break-all { word-break: break-all; }
.keep-all { word-break: keep-all; }
</style>
</head>
<body>
<div class="text-box normal">
<strong>Normal:</strong> VeryLongWordWithoutSpaces and regular text.
</div>
<div class="text-box break-all">
<strong>Break-all:</strong> VeryLongWordWithoutSpaces and regular text.
</div>
<div class="text-box keep-all">
<strong>Keep-all:</strong> VeryLongWordWithoutSpaces and regular text.
</div>
</body>
</html>
Three text boxes appear showing different word-break behaviors. Normal allows the long word to overflow, break-all breaks the word across lines, and keep-all behaves similarly to normal for non-CJK text.
Best Practices
Use
break-allfor containers with limited width where text overflow must be preventedConsider user experience excessive word breaking can reduce readability
Combine with
overflow-wrap: break-wordfor better text handlingTest with different content lengths and container sizes
Conclusion
The word-break property provides essential control over text wrapping behavior. Use break-all to prevent text overflow in constrained layouts, while being mindful of readability impacts when words break mid-character.
378 Views
