How to Prevent Long Words from Overflowing a DIV?

How to Break Long Words for Optimal DIV Display?

Within a DIV, excessive text can extend beyond its allotted bounds, creating a cluttered appearance. To prevent this overflow, it's essential to consider how to effectively break long words.

In the case presented:

<div>

The lengthy "word" disrupts the intended layout. To rectify this, we can enforce line breaks:

Original Solution:

word-wrap: break-word;

Break-word proved to be surprisingly effective, even in the obsolete IE6 browser.

Modern Solution:

overflow-wrap: break-word;

Word-wrap has been deprecated and replaced by overflow-wrap, which boasts compatibility with all contemporary browsers. Despite IE's defunct status, it still relies on word-wrap out of necessity.

However, it's noteworthy that modern usage of word-wrap will still function as it acts as an alias for overflow-wrap, as per specifications. By implementing this fix, you can ensure that even long words seamlessly fit within the confines of your DIV, enhancing the readability and aesthetics of your content.

The above is the detailed content of How to Prevent Long Words from Overflowing a DIV?. For more information, please follow other related articles on the PHP Chinese website!