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
How to Get this Text-Wrapping Effect With HTML/CSS?
The CSS word-wrap property allows long words to be broken and wrapped onto the next line when they exceed the width of their container. This prevents text overflow and ensures content remains within the designated boundaries.
Syntax
selector {
word-wrap: normal | break-word | initial | inherit;
}
Possible Values
| Value | Description |
|---|---|
normal |
Words break only at normal break points (default) |
break-word |
Allows unbreakable words to be broken |
initial |
Sets to default value |
inherit |
Inherits from parent element |
Example 1: Text Wrapping Around Images
The following example demonstrates text wrapping around a floated image
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 20px;
background-color: #D5F5E3;
}
img {
float: left;
margin: 0 15px 10px 0;
width: 100px;
height: 60px;
}
p {
text-align: justify;
font-size: 18px;
line-height: 1.5;
}
</style>
</head>
<body>
<div>
<img src="/images/logo.png" alt="Logo">
<p>
Tutorials Point originated from the idea that there exists a
class of readers who respond better to online content and prefer
to learn new skills at their own pace from the comforts of their
drawing rooms. The journey commenced with a single tutorial on HTML in 2006.
</p>
</div>
</body>
</html>
An image appears on the left side with text flowing around it on the right, creating a natural wrapping effect.
Example 2: Comparing Normal vs Break-Word
This example shows the difference between normal text flow and forced word breaking
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
margin: 20px 0;
padding: 15px;
border: 2px solid #333;
font-size: 16px;
}
.normal {
background-color: #E8DAEF;
word-wrap: normal;
}
.break-word {
background-color: #E9F7EF;
word-wrap: break-word;
}
</style>
</head>
<body>
<h3>Without text-wrapping (normal)</h3>
<div class="container normal">
This is a verylongwordthatdoesnotfitwithinthenormalcontainerwidth!
</div>
<h3>With text-wrapping (break-word)</h3>
<div class="container break-word">
This is a verylongwordthatdoesnotfitwithinthenormalcontainerwidth!
</div>
</body>
</html>
Two containers are displayed: the first shows text overflow, while the second breaks the long word and wraps it properly within the container boundaries.
Example 3: Text Wrapping in Input Fields
This example demonstrates text wrapping within form elements
<!DOCTYPE html>
<html>
<head>
<style>
.text-area {
width: 300px;
height: 100px;
word-wrap: break-word;
word-break: break-all;
padding: 10px;
border: 2px solid #ccc;
font-family: Arial, sans-serif;
resize: vertical;
}
</style>
</head>
<body>
<h3>Text Area with Word Wrapping</h3>
<textarea class="text-area" placeholder="Type some very long words here to see the wrapping effect...">supercalifragilisticexpialidocious pneumonoultramicroscopicsilicovolcanoconiosisverylongwordexample</textarea>
</body>
</html>
A textarea appears with extremely long words that are automatically broken and wrapped to fit within the available width.
Conclusion
The word-wrap: break-word property is essential for preventing text overflow in responsive designs. It ensures long words break appropriately while maintaining readability and layout integrity.
Updated on: 2026-03-15T16:54:08+05:30
890 Views
Advertisements