It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

CSS Word Break

Reading time 1 min
Published Aug 8, 2017
Updated Sep 29, 2019

How to make CSS break words

By default, text lines can only be broken at a space or a hyphen. By using the CSS word-break property, you can modify the way the browser handles text that doesn't fit between the edges of the element.

CSS word break syntax

To syntax for this property is as follows:

word-break: value;

You can choose one of three available values.

The default value for CSS word-break is normal. This means the browser will use the default rules for breaking words:

Example
p.learn {
    word-break: normal;
}

Specifying the break-all will prevent overflowing the container – the browser will be able to break the line between any two characters:

Example
p.learn {
    word-break: break-all;
}

The keep-all value behaves as normal, but doesn't include any CSS word breaks between Asian characters:

Example
p.learn {
    word-break: keep-all;
}

Note: Safari and iOS browsers do not support the keep-all value.

Browser support

Browser image
Chrome
1+
Browser image
Edge
12+
Browser image
Firefox
15+
Browser image
IE
5.5+
Browser image
Opera
15+
Browser image
Safari
3+

Mobile browser support

Browser image
Chrome
18+
Browser image
Firefox
15+
Browser image
Opera
All
Browser image
Safari
2+