解决 html pre 标签的内容自动换行的问题

 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。</p>
<p><pre class="brush:php;toolbar:false"> 标签的一个常见应用就是用来表示计算机的源代码。</p>
<p>而我们经常碰到的一个问题是如果一个代码上碰到有图片或者网页地址就会使代码很长，结果会造成页面撑开或者代码超出边界。非常难受，如果用<a href="http://www.php.cn/wiki/923.html" target="_blank">overflow</a>:hidden那么会将原来的代码隐藏掉，用overflow:auto则会出现滚动条，代码也不方便阅读。</p>
<p>如何解决<pre class="brush:php;toolbar:false">的内容自动换行的问题：</p>
<p>1.先尝试使用：<a href="http://www.php.cn/wiki/878.html" target="_blank">word-wrap</a>: break-word;将内容自动换行，IE，OP，Chrome，Safari都可以，FF就悲剧了。</p>
<p>点击查看demo</p>
<p>2.查看了pre的浏览器默认样式：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>xmp, pre, plaintext {
display: block;
font–family:–moz–fixed;
white–space: pre;
margin:1em0;
}

登录后复制

都有这个white-space: pre，看看white-space的值：

值描述normal默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似 HTML 中的

 标签。nowrap文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。pre-wrap保留空白符序列，但是正常地进行换行。pre-line合并空白符序列，但是保留换行符。inherit规定应该从父元素继承 white-space <a href="http://www.php.cn/wiki/169.html" target="_blank">属性</a>的值。</p><p>有个pre-wrap，保留空白符序列，但是正常地进行换行。</p><p>这样就OK了搞定，我们只要加上样式：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>pre {
white-space: pre-wrap;
word-wrap: break-word;
}

登录后复制