Solve the problem of automatic line wrapping of the content of html pre tags

The

e03b848252eb9375d56be284e690e873 element can define preformatted text. Text enclosed in a pre element usually preserves whitespace and newlines. The text will also be rendered as a fixed-width font.

e03b848252eb9375d56be284e690e873 A common application of tags is to represent computer source code.

A problem we often encounter is that if a code contains an image or a web page address, the code will be very long. As a result, the page will be stretched or the code will exceed the boundary. It's very uncomfortable. If you use overflow:hidden, the original code will be hidden. If you use overflow:auto, a scroll bar will appear, and the code will be inconvenient to read.

How to solve the problem of automatic line wrapping of the content of e03b848252eb9375d56be284e690e873:

1. First try to use: word-wrap: break-word; to automatically wrap the content. IE, OP, Chrome, and Safari are all fine, but FF is a tragedy.

Click to view the demo

2. Checked the default browser style of pre:

xmp, pre, plaintext {
display: block;
font–family:–moz–fixed;
white–space: pre;
margin:1em0;
}

all have thiswhite-space: pre, take a look Value of white-space:

value description normal default. White space is ignored by the browser. Pre blanks will be retained by the browser. It behaves like the e03b848252eb9375d56be284e690e873 tag in HTML. nowrap text will not wrap, the text will continue on the same line until the 0c6dc11e160d3b678d68754cc175188a tag is encountered. pre-wrap preserves whitespace sequences, but wraps lines normally. pre-line merges whitespace sequences but retains newlines. inherit specifies that the value of the white-space attribute should be inherited from the parent element.

There is pre-wrap, which retains the whitespace sequence but performs line breaks normally.

This is OK. We only need to add the style:

pre {
white-space: pre-wrap;
word-wrap: break-word;
}

to make the content of e03b848252eb9375d56be284e690e873 automatically wrap.

The above is the detailed content of Solve the problem of automatic line wrapping of the content of html pre tags. For more information, please follow other related articles on the PHP Chinese website!