How Can I Make Text Wrap in HTML `` Tags?

Text Wrapping in the HTML Pre Tag

Pre tags are a valuable tool for displaying code blocks and debugging output in HTML. However, they may sometimes display as one continuous line, rather than wrapping the text to fit the viewport. To address this, the white-space and word-wrap CSS properties can be used:

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+ */
}

These properties enable text within the pre tag to automatically wrap, preserving whitespace while breaking words at the appropriate points. By applying them, code blocks and debugging output can be displayed in a readable format, even when the text extends beyond the viewport width.

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