<pre> 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

而我们经常碰到的一个问题是如果一个代码上碰到有图片或者网页地址就会使代码很长，结果会造成页面撑开或者代码超出边界。非常难受，如果用overflow:hidden那么会将原来的代码隐藏掉，用overflow:auto则会出现滚动条，代码也不方便阅读。
下面提供符合 W3C 标准并支持多浏览器的 CSS 样式代码：pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;}

pre标签会原样保留HTML内容的格式，可是如果宽度过大会把页面撑坏，这时候需要自动换行来帮忙：
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;      }

父标记最好加个DIV,并设置CSS属性：word-wrap: break-word;white-space : normal；直接使用style写法：
<pre   style="width:30px;word-break:   break-all;   word-wrap:break-word;border:1px   solid  #555">    asfasdfas    dfasd    fa    sdfasdf  </pre>

文章中使用了 pre 格式输出 代码。 而浏览器默认是强制不换行输出 pre 里的内容。这样的话，代码一长就出现了撑到页面外部的样子。在之前我都是有意的在代码里强制换行... 累啊. 今天有意的google了下，找到了：pre {white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap;word-wrap: break-word;}
经测试，除IE[当前使用6]外, 其他可以.... 郁闷，然后增加 width:600px; 后，ok,.换行了，其实位置还是衍生出去了。样子是这样的： 代码是在里面了，但下面的叙述性的东西却出了去。在说，定义一个这个宽度也不是个好的方法，其他的不直接改这个css的方法基本没有了。然后看上面css想到， 为什么定义其他的都用 white-space 而定义 IE 的不使用呢? 又不是IE 不支持。。于是加上就可以了[翻了google的前5页, 没找到一个改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 ;      }

至于本站上使用的是把ie和其他的分开了，因为white-space 在最后也都作用于其他了....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 ;      }

【版权声明】
本站部分内容来源于互联网，本站不拥有所有权，不承担相关法律责任。如果发现本站有侵权的内容，欢迎发送邮件至masing@13sy.com 举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。