word-break Archives - Lena Design

The CSS word-break property defines how words should break when reaching the end of a line.

Demo:

Syntax:

word-break: normal|break-all|keep-all|break-word;

normal (default) – uses default line break rules.

break-all – to prevent overflow, the word may be broken at any character.

keep-all – word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behaviour is the same as the value “normal”

break-word – to prevent overflow, the word may be broken at arbitrary points.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  width: 130px; 
  border: 1px solid #333;
}

.a {
  word-break: normal;
}

.b {
  word-break: keep-all;
}

.c {
  word-break: break-all;
}
</style>
</head>
<body>

<h4>word-break: normal;</h4>
<p class="a">CSSwordbreakProperty. CSS word-break Property. CSS-word-break-Property.</p>

<h4>word-break: keep-all;</h4>
<p class="b">CSSwordbreakProperty. CSS word-break Property. CSS-word-break-Property.</p>

<h4>word-break: break-all;</h4>
<p class="c">CSSwordbreakProperty. CSS word-break Property. CSS-word-break-Property.</p>

</body>
</html>

Output:

word-break: normal;

CSSwordbreakProperty. CSS word-break Property. CSS-word-break-Property.

word-break: keep-all;

CSSwordbreakProperty. CSS word-break Property. CSS-word-break-Property.

word-break: break-all;

CSSwordbreakProperty. CSS word-break Property. CSS-word-break-Property.

Enjoy coding!