How Can I Prevent Overflow in a DIV Caused by Long Words?

Line Break Control in DIV with Long Words

When content within a DIV overflows due to an overly long word, it can become unsightly. The desired behavior is to force a word break to fit within the designated width.

Solution: overflow-wrap

The solution lies in utilizing the overflow-wrap CSS property. Setting overflow-wrap: break-word; will force the web browser to break words at appropriate points to fit within the specified DIV width. This ensures that all content is displayed correctly.

Note for Internet Explorer Compatibility

While overflow-wrap: break-word; is supported in modern browsers, Internet Explorer (IE) does not support this property. Instead, the deprecated word-wrap: break-word; can be used as an alternative.

Current Usage of word-wrap

Despite being deprecated, word-wrap: break-word; still functions because it is an alias for overflow-wrap according to the CSS specification. Therefore, existing uses of word-wrap will continue to work as intended.

The above is the detailed content of How Can I Prevent Overflow in a DIV Caused by Long Words?. For more information, please follow other related articles on the PHP Chinese website!