&lt;pre&gt; 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。&lt;pre&gt; 标签的一个常见应用就是用来表示计算机的源代码。而我们经常碰到的一个问题是如果一个代码上碰到有图片或者网页地址就会使代码很长，结果会造成页面撑开或者代码超出边界。非常难受，如果用overflow:hidden那么会将原来的代码隐藏掉，用overflow:auto则会出现滚动条，代码也不方便阅读。今天折腾了一个晚上终于搞定&lt;pre&gt;的内容自动换行的问题：1、先尝试使用：word-wrap: break-word;将内容自动换行，IE，OP，Chrome，Safari都可以，FF就悲剧了。2、查看了pre的浏览器默认样式：<pre class="brush:html;toolbar:false">xmp,&nbsp;pre,&nbsp;plaintext&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;block;
&nbsp;&nbsp;&nbsp;&nbsp;font-family:&nbsp;-moz-fixed;
&nbsp;&nbsp;&nbsp;&nbsp;white-space:&nbsp;pre;
&nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;1em&nbsp;0;
}</pre>都有这个white-space: pre，看看white-space的值：<table class="dataintable"><tbody><tr class="firstRow"><th style="background-color: rgb(250, 250, 250); border-color: silver; border-collapse: collapse; padding: 8px 14px;">值</th><th style="background-color: rgb(250, 250, 250); border-color: silver; border-collapse: collapse; padding: 8px 14px;">描述</th></tr><tr><td style="font-size: 12px; border-color: silver; border-collapse: collapse; padding: 8px 14px;">normal</td><td style="font-size: 12px; border-color: silver; border-collapse: collapse; padding: 8px 14px;">默认。空白会被浏览器忽略。</td></tr><tr><td style="font-size: 12px; border-color: silver; border-collapse: collapse; padding: 8px 14px;">pre</td><td style="font-size: 12px; border-color: silver; border-collapse: collapse; padding: 8px 14px;">空白会被浏览器保留。其行为方式类似 HTML 中的 &lt;pre&gt; 标签。</td></tr><tr><td style="font-size: 12px; border-color: silver; border-collapse: collapse; padding: 8px 14px;">nowrap</td><td style="font-size: 12px; border-color: silver; border-collapse: collapse; padding: 8px 14px;">文本不会换行，文本会在在同一行上继续，直到遇到 &lt;br&gt; 标签为止。</td></tr><tr><td style="font-size: 12px; border-color: silver; border-collapse: collapse; padding: 8px 14px;">pre-wrap</td><td style="font-size: 12px; border-color: silver; border-collapse: collapse; padding: 8px 14px;">保留空白符序列，但是正常地进行换行。</td></tr><tr><td style="font-size: 12px; border-color: silver; border-collapse: collapse; padding: 8px 14px;">pre-line</td><td style="font-size: 12px; border-color: silver; border-collapse: collapse; padding: 8px 14px;">合并空白符序列，但是保留换行符。</td></tr><tr><td style="font-size: 12px; border-color: silver; border-collapse: collapse; padding: 8px 14px;">inherit</td><td style="font-size: 12px; border-color: silver; border-collapse: collapse; padding: 8px 14px;">规定应该从父元素继承 white-space 属性的值。</td></tr></tbody></table>这样就OK了搞定，我们只要加上样式：<pre class="brush:css;toolbar:false;">pre&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;white-space:&nbsp;pre-wrap;
&nbsp;&nbsp;&nbsp;&nbsp;word-wrap:&nbsp;break-word;
}</pre>就能使&lt;pre&gt;的内容自动换行了。好了，以上就是“pre自动换行，如何让pre的内容自动换行”的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流。

pre自动换行，如何让pre的内容自动换行

From 本站原创

Still Have Questions?