How to Achieve Cross-Browser Word Wrapping in HTML Divs?

Cross-Browser Word-Wrapping of Long Text in Divs

Question:

How can you implement cross-browser word-wrap for long strings within HTML divs?

Answer:

To ensure word-wrapping across different browsers, the following CSS properties can be utilized:

.wordwrap {
   white-space: pre-wrap;      /* CSS3 */
   white-space: -moz-pre-wrap; /* Firefox */
   white-space: -pre-wrap;     /* Opera <7 */
   white-space: -o-pre-wrap;   /* Opera 7 */
   word-wrap: break-word;      /* IE */
}

Explanation:

• white-space: pre-wrap: Browsers without specific word-wrap support will wrap lines at whitespace boundaries.
• white-space: -moz-pre-wrap: Firefox-specific property for enabling pre-wrap behavior.
• white-space: -pre-wrap: Older Opera versions prior to 7.
• white-space: -o-pre-wrap: Opera 7.
• word-wrap: break-word: IE-specific property for breaking words at hyphenation points.

By combining these properties, the text within the div with the "wordwrap" class will wrap at any character breaking point, ensuring cross-browser compatibility.

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