CSS Word Wrap

The CSS word-wrap property is used to control how long words are handled if they are too long to fit within their container. It allows you to specify whether the browser should break long words to prevent them from overflowing their container or wrap them to the next line.

The word-wrap property has been deprecated in favor of the overflow-wrap property, which provides the same functionality. The overflow-wrap property was introduced in CSS3 to improve the behavior of word wrapping.

The syntax for the overflow-wrap property is as follows:

selector {
  overflow-wrap: value;
}

• selector: Represents the CSS class or selector of the element to which the overflow-wrap property will be applied.
• value: Specifies how long words are handled. It can take one of the following values:
• normal: Words will break only at allowed break points (hyphenation points) defined in the language.
• break-word: Long words will be broken at any character to prevent overflow. This can lead to irregular word breaks but ensures that words do not extend beyond the container.

Example:

.long-text {
  width: 200px;
  overflow-wrap: break-word;
}

In this example, the .long-text class has a fixed width of 200px, and the overflow-wrap property is set to break-word. If a word inside an element with this class is too long to fit within the container’s width, it will be broken at any character to prevent overflow.

The overflow-wrap property is particularly useful when dealing with long URLs, email addresses, or other text content that should not cause horizontal overflow but still needs to be displayed in a confined space.

Please note that the word-wrap property is considered outdated, and you should use overflow-wrap instead. Most modern browsers support overflow-wrap, but it’s always a good practice to check for browser compatibility when using any CSS property.