How Can I Prevent Long Words from Breaking My DIV Layout?

Preventing Long Words from Breaking Your Div

In the switch from table-based layouts to DIV-based layouts, a common problem persists: the unsightly spillover of long words over the edge of DIV columns. This issue plagues even major websites and is particularly prevalent in languages like German, where even everyday words can be lengthy.

Solution:

Soft Hyphen

Employing the soft hyphen (­) enables you to designate where browsers should break long words:

averyvery­longword

This character allows browsers to render the word either as "averyverylongword" or "averyvery-

longword."

A regular expression can assist in strategically inserting soft hyphens:

/([^\s-]{5})([^\s-]{5})/ → ­

Element

Alternatively, inject the HTML5 element, a former IE-ism:

averyvery<wbr>longword

This breaks the word without a hyphen, resulting in "averyvery

longword."

CSS Hyphens

Supported by the latest versions of IE, Firefox, and Safari (not Chrome), CSS hyphens enable automatic hyphenation:

div.breaking {
  hyphens: auto;
}

Note that this feature relies on a hyphenation dictionary and may not always break long words consistently.

Overflow and White-space: pre-wrap

Other viable solutions include controlling overflow and setting white-space to pre-wrap:

div.breaking {
  overflow: hidden;
  white-space: pre-wrap;
}

Both approaches prevent long words from extending past the boundary of the DIV.

The above is the detailed content of How Can I Prevent Long Words from Breaking My DIV Layout?. For more information, please follow other related articles on the PHP Chinese website!