Your guide to what's next.
Line breaks in CSS
Mar 15, 2020

Line breaks in CSS

How to tune the browser's text wrapping algorithms?

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 (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: 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.


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 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: 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.

See also
<select> in React
How to implement a controlled <select> in React?
Multi-<select> in React
How to implement a controlled multi-<select> in React?
Article structured data
Article structured data examples.
CSS variables
Using CSS variables.