Advertisement

Advertisement


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.

<!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>

Output

CSS Word Wrap

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.



<!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>

Output

CSS Word Wrap

In this paragraph, there is a very long word: iamsooooooooooooooooooooooooooooooolongggggggggggggggg.The long word will break and wrap to the next line.


Browser Support

Element
Microsoft Edge browser.png Edge
Chrome browser.png Chrome
Firefox browser.png Firefox
Opera browser.png Opera
safari browser.png Safari
word-wrap
5.5
4.0
3.5
10.5
3.1








Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.