The word-wrap CSS property is used to control how long words are handled when they exceed the width of their container. It determines whether long words should break and wrap onto the next line, or if they should overflow and extend beyond the container’s boundaries.
The word-wrap property accepts the following values:
-
normal: This is the default value. Long words will not break and will overflow the container if necessary. -
break-word: Long words will break and wrap onto the next line if they exceed the container’s width.
Here’s an example:
.long-text {
word-wrap: break-word;
}
In this example, the .long-text class sets the word-wrap property to break-word. This ensures that long words within the container will break and wrap onto the next line if they exceed the container’s width.
It’s important to note that the word-wrap property is deprecated in favor of the more widely supported overflow-wrap property. The overflow-wrap property has the same functionality as word-wrap and should be used instead for better cross-browser compatibility.
Here’s an example using the overflow-wrap property:
.long-text {
overflow-wrap: break-word;
}
Both the word-wrap and overflow-wrap properties are commonly used when dealing with long words or strings of characters that could disrupt the layout or cause horizontal scrolling. By allowing words to break and wrap onto the next line, you can ensure better readability and prevent layout issues in responsive or constrained layouts.