CSS Word-Break Property
FREE
Overview
In CSS, long strings that do not fit within their container have various properties to make them fit. The word-break property is one such property. The word break CSS property merely sets the rules for line breaking. It specifies where the line breaks will appear in the text. So that the text can fit in the given space; otherwise, the content box would overflow. You can use the CSS attributes such as word-wrap, overflow-wrap, and word-break to wrap or break words that might otherwise overflow their container. This article provides a detailed explanation of the word break CSS property and how you may use it to avoid content overflow from spoiling your perfectly structured layout.
Syntax of word break CSS
Word Break CSS property
- Making a site responsive so that it appears correctly on all devices is important. However, despite all of your best efforts, you may still wind up with flawed layouts.
- Broken layouts can occur when certain words are too long to fit in their container. Content overflow might occur while dealing with user-generated content over which you have no control, such as the comments area of a blog article. As a result, word break CSS is applied to prevent content from overflowing its container.
- The word-break CSS property can be used to specify when line breaks should occur. Line breaks in text are only permitted in specific spaces, such as when there is a space or a hyphen.
- Word break CSS will brutally break the overflowing word between two letters even if placing it on its own line eliminates the requirement for word break.
- Word break CSS property is set to normal by default. This means that the browser will break words according to the default rules.
Values of Word Break CSS
normal
The default value of the word-break CSS property is normal. It uses the default rules for word breaking.
When the word break CSS property is set to normal, the following word-break rules are applied:
The image below shows what happens when the styling word-break: normal is applied to a block of text that contains a word that is longer than its container.
break-all
Word breaks should be inserted in between any two words (excluding Chinese/Japanese/Korean text) to avoid overflow.
It will not place the word on its own line, even if doing so would eliminate the requirement for a line break:
In the image below, I've used word-break: break-all styling on a p element with a width of 240px and overflowing text. The browser added a line break where an overflow would occur and wrapped the remaining text to the next line.
In English and other related language systems, using a break-all value will break a word between two characters at the exact point where an overflow would occur. However, It will not behave similarly to Chinese, Japanese, and Korean (CJK) texts.
It does not apply the same behavior to CJK texts since CJK writing systems have their own breakpoint rules. Creating a line break arbitrarily between two characters only to avoid overflow may substantially alter the overall meaning of the text. For CJK systems, the browser will insert line breaks whenever such breaks are permitted.
keep-all
The value keep-all of word break CSS breaks the word in the default style. No word breaks should be used for Chinese/Japanese/Korean (CJK) text.
When you use the keep-all value, the browser will not apply word breaks to CJK texts, even if there is content overflow. The consequence of using the keep-all value is the same as it is for non-CJK writing systems:
In the image below, I've used word-break: keep-all styling on a p element with a width of 240px and overflowing text. It has the same impact as word-break: normal because I have used a non-CJK writing system (Latin).
break-word (deprecated)
The value break-word of word break CSS inserts a word break between the characters in order to prevent word overflow. When you use this value, the browser will break the lines at any point.
In terms of functionality, the value break-word is similar anywhere. If the word is too long to fit and occurs near the end of the line, it may be broken from the middle. Hyphens are not permitted.
Note: The value break-word for the property word-break CSS is deprecated; it has the same effect, when specified, as word-break: normal. The word break CSS property also supports a deprecated break-word keyword for compatibility with legacy material.
Example of word break CSS
Output of the above code:
Browser Support
The following browsers support the word break CSS property:
| Browser | Google Chrome | Internet Explorer | Microsoft Edge | Firefox | Opera | Safari |
|---|---|---|---|---|---|---|
| Version Support | Yes | Yes | Yes | Yes | Yes | Yes |
| Download | 1.0+ | 8.0+ | 12.0+ | 15.0+ | 15.0+ | 3.0+ |
Conclusion
- Word break CSS is a feature that allows you to indicate soft wrap opportunities between characters, i.e., where it is "normal" and acceptable to break lines of text. This feature allows you to break a word exactly where an overflow would occur and wrap it onto the next line.
- Word-break CSS will brutally break the overflowing word between two letters even if placing it on its own line eliminates the requirement for word break. Some writing systems, such as CJK, have strict word-breaking rules that the browser takes into account when making line breaks with word-break.
- Word-break CSS does not apply the same behavior to CJK texts since CJK writing systems have their own breakpoint rules. Creating a line break arbitrarily between two characters only to avoid overflow may substantially alter the overall meaning of the text. The browser will insert line breaks for CJK systems whenever such breaks are permitted.
Related Properties
- word-wrap
- overflow-wrap