The CSS word-wrap property let the long words be able to be broken and wrap onto the next line.
Demo:
Syntax:
word-wrap: normal|break-word;normal (default) – break words only at allowed break points.
break-word – allows unbreakable words to be broken.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.a, .b {
width: 140px;
border: 1px solid #333;
}
.a {
word-wrap: normal;
}
.b {
word-wrap: break-word;
}
</style>
</head>
<body>
<h4>word-wrap: normal;</h4>
<div class="a">CSSwordwrapProperty.</div>
<h4>word-wrap: break-word;</h4>
<div class="b">CSSwordwrapProperty.</div>
</body>
</html>Output:
word-wrap: normal;
CSSwordwrapProperty.
word-wrap: break-word;
CSSwordwrapProperty.
Enjoy coding!
Read also: