CSS word-break Property

CSS's word-break property can be used to specify when line breaks should occur. Line breaks are normally only used when there is a space or a hyphen. When the break-all value is set in the word-break property, the browser will break lines at any point.

Syntax

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
    p {
        width: 150px;
        border: 1px solid black;
    }
    .ex1 {
        word-break: normal;
    }
    .ex2 {
        word-break: keep-all;
    }
    .ex3 {
        word-break: break-all;
    }
</style>
</head>
<body>

<h2>word-break: normal (default)</h2>
<p class="ex1">Thisissomeveryveryverylongword. Words will break according to usual rules.</p>

<h2>word-break: keep-all</h2>
<p class="ex2">Thisissomeveryveryverylongword. This text will-break-at-hyphens.</p>

<h2>word-break: break-all</h2>
<p class="ex3">Thisissomeveryveryverylongword. This text will break at any character.</p>

</body>
</html>

Preview

Property Values

Value	Description
normal	The default value. The default line break rules are used.
break-all	To avoid overflow, the word can be broken at any character.
keep-all	For Chinese/Japanese/Korean (CJK) text, no word breaks should be used. The behavior of non-CJK text is the same as the value "normal."
break-word	To prevent overflow, the word can be broken at any point.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Property	Chrome	Firefox	Safari	Edge / IE	Opera
word-break	4.0	15.0	3.1	5.5	15.0

width

word-spacing

CSS word-break Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us