Line breaks in CSS

There are five CSS properties that affect how text is split into lines to fill the container: overflow-wrap (word-wrap), word-break, line-break, white-space, hyphenate.

overflow-wrap

overflow-wrap (previously called word-wrap) determines how long words are handled. overflow-wrap: break-word causes long words that by themselves would otherwise overflow the width of the container to be split between any two characters. The first part of the long word always occupies its own line.

word-break

word-break: break-all introduces line breaks in all words regardless of how long they are, between any two characters (excluding CJK text), without favoring spaces and hyphens as break points.

line-break

Unlike word-break: break-all, line-break: anywhere adds line breaks between any two characters even inside CJK text but otherwise has the same effect.

white-space

white-space is a well-known CSS property that is usually used to either suppress text wrapping (white-space: nowrap) or preserve spacing and line breaks (white-space: pre, used by <pre> elements by default).

hyphens

hyphens: auto automatically hyphenates and wraps words regardless of their length.

Other properties

Note that the text-overflow, overflow, and clip-path properties does not influence line breaks.