How to Make Text Wrap in HTML `` Tags?

Text Wrapping in Pre Tags

In HTML, pre tags are frequently employed for code blocks and debugging output display. However, it's often desirable to ensure that the text in these tags wraps to prevent long, unbroken lines. The solution lies in the CSS white-space and word-wrap properties.

CSS Properties for Text Wrapping

To enable text wrapping in pre tags, utilize the following CSS properties:

• white-space: pre-wrap; (CSS 2.1 )
• white-space: -moz-pre-wrap; (Mozilla)
• white-space: -pre-wrap; (Opera 4-6)
• white-space: -o-pre-wrap; (Opera 7)
• word-wrap: break-word; (Internet Explorer 5.5 )

Example Code

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Incorporating this CSS rule into your HTML document will cause text within pre tags to wrap as desired, preventing long, single-line displays.

The above is the detailed content of How to Make Text Wrap in HTML `` Tags?. For more information, please follow other related articles on the PHP Chinese website!