
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!
Read also: