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="//m.sbmmt.com/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="//m.sbmmt.com/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;
}