html 中的 pre 标签默认是不会换行的,即使声明了 word-wrap 和 word-break 属性也没有效果;div 标签可以很方便的换行,不会把页面撑破。因为这个原因,很多网站在显示代码的时候使用 div 来作为容器。使用 div 标签装载代码有个弊端,就是冗余内容太多,换行,制表符,空格等都需要转换,自然源代码的体积也大了不少。若一定要使用 div 标签,也可以通过 white-space 来控制 div 中内容显示的样式,此举也是可以的。: G. ~3 i. ]' _3 ^. c% A
本人认为,在源代码中使用 pre 标签作为代码容器是首选,后期前端再用其他的 javascript 代码高亮插件美化渲染,那又另当别论。使用 css 将 pre 中内容换行的样式如下,测试发现效果还不错。
1 I' |: g% n! L4 ~! N& A<style>
: G5 w0 Y, k3 Rpre{
7 n9 B6 h5 i2 X% m" mwhite-space: pre-wrap; /* css-3 */
; _2 h: m$ j& h, X; pwhite-space: -moz-pre-wrap; /* mozilla, since 1999 */$ O+ ?3 }( w* l+ {2 A
white-space: -pre-wrap; /* opera 4-6 */
+ s5 ?6 h; u0 I- Uwhite-space: -o-pre-wrap; /* opera 7 */* X0 c* k" ^( b E& B
word-wrap: break-word; /* internet explorer 5.5+ */
* H' n1 ?: m9 u; Y9 I. @# W% g. Soverflow: auto;
m# w- H2 f8 c1 E7 {2 r+ Kword-break: break-all;
: h, K P1 x$ a, z. ~word-wrap: break-word;. b! Y% t P; h8 ~5 a% W
}, t! a4 z: [( F, v9 ^0 F3 `2 t3 H6 h
</style>
6 r+ ~- c+ b, m5 L9 E: w v
9 O9 I+ b' I, R) A7 O2 m更多网页制作信息请查看: 网页制作 |
|