How to make pre tag wrap automatically?

 tag automatically wrap and comply with W3C standards (multi-browser support) </p>
<p>By default, the content in the <pre /> tag will not wrap if it exceeds the range. Line wrapping will occur automatically, which may cause trouble when displaying or printing. </p>
<p>The following provides CSS style code that complies with W3C standards and supports multiple browsers: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">pre{white-space:pre-wrap;
white-space:-moz-pre-wrap;
white-space:-pre-wrap;
white-space:-o-pre-wrap;
word-wrap:break-word;
}

The pre tag will retain the format of the HTML content as it is, but if the width is too large, the page will be damaged. Need automatic line wrapping to help:

Wrapping the pre tagMaking preformated text wrap in CSS3, Mozilla, Opera and IEis the tip that let's you use the pre tag to keep the formatting, 
without cursing yourself when some of the content is too long and doesn't wrap:
pre {white-space: pre-wrap;      
white-space: -moz-pre-wrap; 
white-space: -pre-wrap;     
white-space: -o-pre-wrap;   
word-wrap: break-word;      
}

It is best to add a DIV to the parent tag and set the CSS attribute: word-wrap: break-word; white-space: normal; use style writing directly :

<pre   
style="width:30px;word-break:   
break-all;   
word-wrap:break-word;border:1px   
solid  #555">    
asfasdfas    
dfasd    
fa    
sdfasdf  

The pre format output code is used in the article. By default, the browser forces the content in pre to be output without line breaks. In this case, the code will appear to extend outside the page as it grows. In the past, I intentionally forced line breaks in the code... I'm tired. Today I deliberately googled it and found:

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

After testing, except IE [currently using 6], everything else can do it. ... Depressed, then I added width:600px; and then, ok, the line was changed, but the position was actually derived. It looks like this: The code is in, but the narrative underneath is out. In other words, defining this width is not a good method. There are basically no other methods that do not directly change the css. Then I looked at the css above and thought, why do I use white-space when defining other things but not when defining IE? It’s not that IE doesn’t support it. . So just add it [I looked through the first 5 pages of Google and couldn’t find a solution that could be solved by changing css...].

pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;white-space: -o-pre-wrap;word-wrap: break-word;
white-space : normal ;      
}

As for the one used on this site, IE is separated from other ones, because white-space also affects other ones in the end....

pre { 
white-space: pre-wrap;       
white-space: -moz-pre-wrap;  
white-space: -pre-wrap;      
white-space: -o-pre-wrap;   }
* html pre { 
word-wrap: break-word;       
white-space : normal ;      
}

The above is the detailed content of How to make pre tag wrap automatically?. For more information, please follow other related articles on the PHP Chinese website!