word-wrap Archives - Lena Design

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!