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
Selected Reading
Specify Word Breaking Rules using CSS3
To specify word breaking rules in CSS3, use the word-break property. This property controls how words should break when they reach the end of a line, particularly useful when dealing with long words that might overflow their container.
Syntax
word-break: value;
Possible Values
| Value | Description |
|---|---|
normal |
Uses default line break rules (breaks only at whitespace and hyphens) |
break-all |
Breaks words at any character to prevent overflow |
break-word |
Breaks long words at arbitrary points to prevent overflow |
keep-all |
Prevents breaking in Chinese, Japanese, and Korean text |
Example 1: Normal Word Breaking
The normal value uses default word breaking rules ?
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 150px;
border: 2px solid #3008c0;
padding: 15px;
margin: 10px;
background-color: #f0f0f0;
word-break: normal;
}
</style>
</head>
<body>
<h3>Normal Word Breaking</h3>
<div class="container">
This is a supercalifragilisticexpialidocious word that demonstrates normal breaking.
</div>
</body>
</html>
A bordered container displays text where the long word "supercalifragilisticexpialidocious" overflows outside the container boundaries, as normal breaking only occurs at natural word boundaries.
Example 2: Break-All Word Breaking
The break-all value breaks words at any character to prevent overflow ?
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 150px;
border: 2px solid #c03000;
padding: 15px;
margin: 10px;
background-color: #fff0f0;
word-break: break-all;
}
</style>
</head>
<body>
<h3>Break-All Word Breaking</h3>
<div class="container">
This is a supercalifragilisticexpialidocious word that demonstrates break-all behavior.
</div>
</body>
</html>
A bordered container displays text where the long word "supercalifragilisticexpialidocious" breaks at any character position to fit within the container width, preventing overflow.
Example 3: Break-Word Breaking
The break-word value breaks words only when necessary to prevent overflow ?
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 150px;
border: 2px solid #00c030;
padding: 15px;
margin: 10px;
background-color: #f0fff0;
word-break: break-word;
}
</style>
</head>
<body>
<h3>Break-Word Breaking</h3>
<div class="container">
This is a supercalifragilisticexpialidocious word that demonstrates break-word behavior.
</div>
</body>
</html>
A bordered container displays text where normal words break naturally at spaces, but the long word "supercalifragilisticexpialidocious" breaks only when necessary to prevent overflow, maintaining better readability than break-all.
Conclusion
The word-break property provides essential control over text wrapping behavior. Use normal for standard text, break-all for aggressive breaking, and break-word for balanced overflow prevention with better readability.
Updated on: 2026-03-15T15:09:10+05:30
247 Views
Advertisements