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
Break the line and wrap onto next line with CSS
The CSS word-wrap property allows you to break long words and wrap them onto the next line when they exceed their container's width. This is particularly useful for preventing text overflow in fixed-width containers.
Syntax
selector {
word-wrap: value;
}
Possible Values
| Value | Description |
|---|---|
normal |
Default. Break words only at normal word break points |
break-word |
Allows unbreakable words to be broken at arbitrary points |
Example: Breaking Long Words
The following example demonstrates how to break long words that exceed the container width −
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
border: 2px solid #000000;
padding: 10px;
margin: 10px 0;
}
.normal {
word-wrap: normal;
}
.break-word {
word-wrap: break-word;
}
</style>
</head>
<body>
<h3>Normal (no breaking):</h3>
<div class="normal">
This is a veryveryveryveryverylongwordthatwilloverflow the container.
</div>
<h3>With word-wrap: break-word:</h3>
<div class="break-word">
This is a veryveryveryveryverylongwordthatwilloverflow the container.
</div>
</body>
</html>
The first div shows text overflowing beyond the container border. The second div breaks the long word and wraps it to the next line, keeping all text within the container boundaries.
Conclusion
The word-wrap: break-word property is essential for handling long words in fixed-width containers. It ensures text remains readable and contained within its designated space by breaking words when necessary.
Updated on: 2026-03-15T12:05:23+05:30
848 Views
Advertisements