html 中的 pre 标签默认是不会换行的,即使声明了 word-wrap 和 word-break 属性也没有效果;div 标签可以很方便的换行,不会把页面撑破。因为这个原因,很多网站在显示代码的时候使用 div 来作为容器。使用 div 标签装载代码有个弊端,就是冗余内容太多,换行,制表符,空格等都需要转换,自然源代码的体积也大了不少。若一定要使用 div 标签,也可以通过 white-space 来控制 div 中内容显示的样式,此举也是可以的。
5 ]7 | j; H7 @/ N本人认为,在源代码中使用 pre 标签作为代码容器是首选,后期前端再用其他的 javascript 代码高亮插件美化渲染,那又另当别论。使用 css 将 pre 中内容换行的样式如下,测试发现效果还不错。: d$ W/ u; J( Z2 W( Y
<style>0 A6 g3 d% M: Q9 V* [/ D
pre{
+ |( w% `4 B) T' e( [; U/ _white-space: pre-wrap; /* css-3 */) t) W5 E) K4 w c" e# ]# [8 i
white-space: -moz-pre-wrap; /* mozilla, since 1999 */, E& W* ] U; c) K: h, M. ?
white-space: -pre-wrap; /* opera 4-6 */: v+ g; n8 g0 B
white-space: -o-pre-wrap; /* opera 7 */
3 C# G% B3 J" Kword-wrap: break-word; /* internet explorer 5.5+ */
4 m9 T' N' C8 J! r* Z. N7 [, u, O. ?overflow: auto;# y: E5 a/ N4 {" P# n' M; S3 m5 H
word-break: break-all;' R* z4 N2 ~9 \$ _
word-wrap: break-word;
& u. i- y+ c! r. K}
; Y0 D- z8 e( l$ u9 v9 H; D</style># `9 }' M# s3 P# v& U6 f) j
9 _* J( i) X( P
更多网页制作信息请查看: 网页制作 |
|