CSS实现pre标签中内容换行方法
浏览数：30 /
时间：2015年06月09日
CSS实现pre标签中内容换行方法技术
原文链接 : http://blog.lmlphp.com/archives/70 来自 : LMLPHP后院
HTML 中的 PRE 标签默认是不会换行的，即使声明了 word-wrap 和 word-break 属性也没有效果；DIV 标签可以很方便的换行，不会把页面撑破。因为这个原因，很多网站在显示代码的时候使用 DIV 来作为容器。使用 DIV 标签装载代码有个弊端，就是冗余内容太多，换行，制表符，空格等都需要转换，自然源代码的体积也大了不少。若一定要使用 DIV 标签，也可以通过 white-space 来控制 DIV 中内容显示的样式，此举也是可以的。
本人认为，在源代码中使用 PRE 标签作为代码容器是首选，后期前端再用其他的 JavaScript 代码高亮插件美化渲染，那又另当别论。使用 CSS 将 PRE 中内容换行的样式如下，测试发现效果还不错。
<style>
pre{
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
overflow: auto;
word-break: break-all;
word-wrap: break-word;
}
</style>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
