CSS Word Wrap
CSS word-wrap property as the name suggests, is used to break the long words and wrap onto the next line according to
the width available. It can prevent overflow of text when a string is too long to fit in the containing box.
Word Wrap Property Values
| Value | Description |
|---|---|
| normal | It is the default value. It break line only at allowed break points. It doesn't break words in between. |
| break-word | It allows long words to be broken according to space available. |
| initial | It sets this property to its default value. |
| inherit | It inherits property from its parent element. |
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Word Wrap </title>
<meta charset="UTF-8">
<style>
.test {
width: 11em;
border: 1px solid #000000;
word-wrap: break-word;
}
.test1 {
width: 11em;
border: 1px solid #000000;
}
</style>
</head>
<body>
<h2>With Word Wrap</h2>
<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword.
The long word will break and wrap to the next line.</p>
<h2>Without Word Wrap</h2>
<p class="test1"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword.
The long word will break and wrap to the next line.</p>
</body>
</html>
<html lang="en">
<head>
<title> CSS Word Wrap </title>
<meta charset="UTF-8">
<style>
.test {
width: 11em;
border: 1px solid #000000;
word-wrap: break-word;
}
.test1 {
width: 11em;
border: 1px solid #000000;
}
</style>
</head>
<body>
<h2>With Word Wrap</h2>
<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword.
The long word will break and wrap to the next line.</p>
<h2>Without Word Wrap</h2>
<p class="test1"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword.
The long word will break and wrap to the next line.</p>
</body>
</html>
Output
With Word Wrap
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
Without Word Wrap
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Word Wrap </title>
<meta charset="UTF-8">
<style>
.test {
width: 15em;
background-color: #99d867bd;
border: 1px solid red;
padding:10px;
word-wrap: break-word;
}
</style>
</head>
<body>
<p class="test"> In this paragraph, there is a very long word:
iamsooooooooooooooooooooooooooooooolongggggggggggggggg.The long word will break and wrap to the next line.</p>
</body>
</html>
<html lang="en">
<head>
<title> CSS Word Wrap </title>
<meta charset="UTF-8">
<style>
.test {
width: 15em;
background-color: #99d867bd;
border: 1px solid red;
padding:10px;
word-wrap: break-word;
}
</style>
</head>
<body>
<p class="test"> In this paragraph, there is a very long word:
iamsooooooooooooooooooooooooooooooolongggggggggggggggg.The long word will break and wrap to the next line.</p>
</body>
</html>
Output
In this paragraph, there is a very long word: iamsooooooooooooooooooooooooooooooolongggggggggggggggg.The long word will break and wrap to the next line.
Browser Support
 Edge |
 Chrome |
 Firefox |
 Opera |
 Safari |
|
|---|---|---|---|---|---|
word-wrap |
Recommended :