CSS Word Break

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:

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:

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

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

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

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

Browser support

Mobile browser support