word-break

The property word-break determines the possibility of soft wrapping between letters, i.e. when it is acceptable to break lines of text.

Initial Value normal
Applies to All elements
Inheritance yes
Animation discrete

The word-break property specifies an automatic line break for the text that exceeds the element’s width. For example, if a long word that does not contain spaces does not fit in the box, it can either be displayed as is through the content area or automatically inserted as a line break to fit in the content area.

Syntax

/* Keyword values */

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

/* Global values */

word-break: inherit;
word-break: initial;
word-break: revert;
word-break: revert-layer;
word-break: unset;

Description

valuewhat it does
normalThe default line wrapping rules are used. As a rule, in this case, lines do not wrap or wrap in places where wrapping is explicitly specified (such as using <br>)
break-allLine breaks are added automatically to fit the word within the specified block width. The value does not work for Chinese, Korean, or Japanese text.
keep-allDoes not allow line breaks in Chinese, Korean, or Japanese words. For other languages, it acts like normal .
inheritThe value is inherited from the parent element.
initialSets the default value.

Example

keep-all

just some words

more words

So many words it’s almost a sentence

Lorem~ipsum~dolor~sit~amet,consectetur~adipiscing~elit.

break-all

just some words

more words

So many words it’s almost a sentence

Lorem~ipsum~dolor~sit~amet,consectetur~adipiscing~elit.