How to Achieve Cross-Browser Word Wrapping in CSS and JavaScript?

Cross-Browser Word Wrapping in CSS and JavaScript for Long Text in Divs

Problem:

Wrapping long text without breaking spaces within pre-determined width divs is a cross-browser challenge. Traditional methods like overflow or injecting special characters into the string have limitations or drawbacks.

CSS Solution:

Utilizing the CSS property word-wrap: break-word; solves this problem. It supports text wrap for all major browsers, including FireFox, Opera, and Safari.

Code Example:

.wordwrap {
    word-wrap: break-word;
}

This stylesheet class will enable text to break lines within the boundaries of the div it is applied to.

Additional Notes:

• The word-wrap property is supported in Internet Explorer 5.5 and all modern browsers.
• Combining word-wrap with other CSS properties, such as no_wordwrap, provides control over wrapping behavior. For example:

.no_wordwrap {
    word-wrap: normal;
}

The above is the detailed content of How to Achieve Cross-Browser Word Wrapping in CSS and JavaScript?. For more information, please follow other related articles on the PHP Chinese website!