html 中的 pre 标签默认是不会换行的,即使声明了 word-wrap 和 word-break 属性也没有效果;div 标签可以很方便的换行,不会把页面撑破。因为这个原因,很多网站在显示代码的时候使用 div 来作为容器。使用 div 标签装载代码有个弊端,就是冗余内容太多,换行,制表符,空格等都需要转换,自然源代码的体积也大了不少。若一定要使用 div 标签,也可以通过 white-space 来控制 div 中内容显示的样式,此举也是可以的。
$ N3 Y w9 ^7 J* U本人认为,在源代码中使用 pre 标签作为代码容器是首选,后期前端再用其他的 javascript 代码高亮插件美化渲染,那又另当别论。使用 css 将 pre 中内容换行的样式如下,测试发现效果还不错。; ~4 }) b) b7 N
<style>* _1 a5 g+ a$ ?! X% }' f
pre{! z/ O0 E8 `7 ? I
white-space: pre-wrap; /* css-3 */1 }6 \" H. r6 v
white-space: -moz-pre-wrap; /* mozilla, since 1999 */
1 u8 S4 a# f6 {/ ]3 s' Mwhite-space: -pre-wrap; /* opera 4-6 */
5 i8 M0 d$ p ` k. Z! B$ Z% U, @white-space: -o-pre-wrap; /* opera 7 */$ J. M# n1 K7 I4 K* M
word-wrap: break-word; /* internet explorer 5.5+ *// P e3 O9 x2 A+ l
overflow: auto;* `3 A# d. l+ c. M1 f8 R
word-break: break-all;2 B0 E. ` g0 d1 G/ H
word-wrap: break-word;$ ?4 T" b9 W1 F8 `8 {
}
; P. @6 x O" U2 v- A& Z</style># b. C4 d+ H; z8 n1 H, y9 h- e1 ?
! ~5 e3 F. c3 y/ h3 M
更多网页制作信息请查看: 网页制作 |
|