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

The

 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. </p>
<p><pre class="brush:php;toolbar:false"> A common application of tags is to represent computer source code. </p>
<p>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 <a href="http://www.php.cn/wiki/923.html" target="_blank">overflow</a>: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. </p>
<p>How to solve the problem of automatic line wrapping of the content of <pre class="brush:php;toolbar:false">: </p>
<p>1. First try to use: <a href="http://www.php.cn/wiki/878.html" target="_blank">word-wrap</a>: break-word; to automatically wrap the content. IE, OP, Chrome, and Safari are all fine, but FF is a tragedy. </p>
<p>Click to view the demo</p>
<p>2. Checked the default browser style of pre: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">xmp, pre, plaintext {
display: block;
font–family:–moz–fixed;
white–space: pre;
margin:1em0;
}

Copy after login

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

 tag in HTML. nowrap text will not wrap, the text will continue on the same line until the <br> 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 <a href="http://www.php.cn/wiki/169.html" target="_blank"> attribute </a> should be inherited from the parent element. </p><p>There is pre-wrap, which retains the whitespace sequence but performs line breaks normally. </p><p>This is OK. We only need to add the style: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">pre {
white-space: pre-wrap;
word-wrap: break-word;
}

Copy after login