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

 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。</p>
<p><pre class="brush:php;toolbar:false"> 标签的一个常见应用就是用来表示计算机的源代码。</p>
<p>而我们经常碰到的一个问题是如果一个代码上碰到有图片或者网页地址就会使代码很长，结果会造成页面撑开或者代码超出边界。非常难受，如果用<a href="//m.sbmmt.com/wiki/923.html" target="_blank">overflow</a>:hidden那么会将原来的代码隐藏掉，用overflow:auto则会出现滚动条，代码也不方便阅读。</p>
<p>如何解决<pre class="brush:php;toolbar:false">的内容自动换行的问题：</p>
<p>1.先尝试使用：<a href="//m.sbmmt.com/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:html;toolbar:false">xmp, pre, plaintext {
display: block;
font–family:–moz–fixed;
white–space: pre;
margin:1em0;
}