Definition
The overflow-wrap CSS property is used to control how long words and strings of text should be wrapped or broken when they exceed the width of their container. It determines whether the text should be allowed to overflow the container or if it should wrap onto the next line to maintain readability.
The overflow-wrap property accepts two values:
-
normal: This is the default value. It allows words to break only at allowed break points, such as hyphens, if present. If there are no allowed break points, the text may overflow the container. -
break-word: This value allows long words or strings of characters to break and wrap onto the next line, even if there are no allowed break points. This helps prevent horizontal scrolling and ensures that the text stays within the container.
Here’s an example:
.container {
overflow-wrap: break-word;
}
In this example, the .container class applies the overflow-wrap: break-word; rule to allow long words or strings of text to break and wrap onto the next line within the container, if needed.
The overflow-wrap property is particularly useful when dealing with long URLs, email addresses, or other content that may cause horizontal overflow. By using break-word, you can ensure that the text is wrapped and displayed within the available space, maintaining readability and preventing layout issues caused by horizontal overflow.