1. css
  2. /properties
  3. /word-break

word-break

Overview

The word-break property sets the rules for line breaking in text elements, determining where line breaks will appear to ensure the text fits within the given space. This property can be used in conjunction with other CSS properties to wrap or break words that might otherwise overflow their container. By default, a line of text breaks at a space or hyphen position, but the word-break property can contain values that modify this behavior.

Examples and Usage

To demonstrate the basic behavior, we'll create several paragraphs with word-break values and observe the effect of each value on line breaking.

<p class="normal-break">The Floccinaucinihilipilification word has no space. The text will break as per default rules.</p>

<p class="keep-all">Hippopotomonstrosesquippedaliophobia is another long word. Here, the text will-break-at-the hyphens.</p>

<p class="break-all">Pneumonoultramicroscopicsilicovolcanoconiosis is long also. Text breaks at any character.</p>

p {
  width: 140px;
  border: 1px solid red;
}

.normal-break {
  word-break: normal;
}

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

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

First off, the .normal-break paragraph uses the default normal value, breaking the text according to usual rules. Then, the .keep-all paragraph uses the keep-all value, which prevents words from breaking except at hyphen positions. This is particularly useful for Chinese, Japanese, and Korean text, where words are not typically broken. Finally, the .break-all paragraph has a break-all value, allowing the text to break at any character when reaching the end of the line.

Syntax and Values

The word-break property accepts the following values:

word-break: normal | break-all | keep-all | break-word | initial | inherit;
ValueDescription
normalFollows standard line break rules (default value).
break-allFor overflow prevention, words may break at any character when reaching the end of the line.
keep-allShouldn't be used for Chinese/Japanese/Korean text. Otherwise, text behavior is like normal.
break-wordDeprecated. Acts as if word-break: normal and overflow-wrap: anywhere are applied.
initialResets the property to its default value (normal).
inheritInherits the property from its parent element.

Associated Properties

  • hyphens
  • word-wrap
  • letter-spacing
  • white-space
  • text-align
  • text-indent

Tips and Tricks

  • When using the word-break property, be aware that words broken at the end of each line can become practically unreadable due to the lack of visual indication of where the word has been broken.

  • To maintain readability and responsiveness, consider using the word-wrap property in combination with the hyphens property. This approach breaks long words and adds hyphens at the points where the words have been broken.

  • For a full-width line effect with lines breaking words without sacrificing readability, you can further enhance your text by using the text-align: justify property. This ensures a more visually pleasing and organized appearance.

Browser Compatibility

BrowserChromeEdgeSafariFirefoxOperaInternet Explorer
SupportYesYesYesYesYesYes

In specific browser versions the break-all value is partially supported. In Chrome, Safari, and other WebKit/Blink-based browsers, the non-standard break-word value is also supported, functioning similarly to word-wrap: break-word. (Referring to the provided link below for specific browser compatibility)

Useful Resources

Can I use... word-break

CSS Text Module Level 3 - W3C

W3C CSS Overflow Module Level 3