Definition
The word-break CSS property is used to control how words are broken and wrapped when they exceed the available width of their container. It specifies the behavior of line breaks within words, allowing you to control whether words should break at the end of a line or if they should be wrapped onto the next line.
The word-break property accepts the following values:
-
normal: This is the default value. Words break only at allowed break points, such as hyphens or soft hyphens. If no hyphenation opportunities are available, the word is not broken and may overflow the container. -
break-all: Words can break at any character, even if there are no explicit hyphens or soft hyphens. This can result in words being broken in the middle if they exceed the container width. -
keep-all: Words are not broken, even if they exceed the container width. This is particularly useful for scripts such as East Asian languages where line breaks are not typically used within words.
Here’s an example:
.long-words {
word-break: break-all;
}
In this example, the .long-words class sets the word-break property to break-all, allowing words to break at any character if they exceed the container width.
It’s important to note that the word-break property affects only how words are broken within a single line. For multi-line text, the overflow-wrap or word-wrap property is typically used to handle word wrapping.
The word-break property is commonly used in cases where you need more control over word breaking, such as dealing with long URLs or strings without spaces. By specifying break-all, you ensure that words can break at any character, allowing for better fit within the container. However, it’s important to consider the impact on readability and design, as breaking words in the middle may affect legibility or disrupt the visual flow of the text.