Word-break is a CSS property that controls how words are broken within a line. It allows you to specify how words should be divided when necessary to fit within a container’s width.
Values
- normal: This is the default value. Words are broken according to the language-specific rules.
- keep-all: Prevents words from being broken. If a word is too long to fit on a line, it will overflow the container.
- break-all: Allows words to be broken at any character, regardless of the language-specific rules.
- break-word: Breaks words at any character, but prefers breaking at word boundaries.
Usage
Apply the property to the element
.your-element {
word-break: keep-all; /* or any other value */
}Replace your-element with the actual element you want to style.
Examples
Prevent word breaks
p {
word-break: keep-all;
}Break words at any character
span {
word-break: break-all;
}Break words at word boundaries, but allow breaking at any character if necessary
h1 {
word-break: break-word;
}Considerations
- Language-specific rules: The
normalvalue follows language-specific rules for word breaks. For languages like English, this typically means breaking at word boundaries. However, for languages like Chinese or Japanese, which don’t have explicit word boundaries, the behavior may differ. - Font effects: The choice of font can also influence word breaks. Some fonts may have different rules for hyphenation or word spacing, which can affect the final appearance.