html 中的 pre 标签默认是不会换行的,即使声明了 word-wrap 和 word-break 属性也没有效果;div 标签可以很方便的换行,不会把页面撑破。因为这个原因,很多网站在显示代码的时候使用 div 来作为容器。使用 div 标签装载代码有个弊端,就是冗余内容太多,换行,制表符,空格等都需要转换,自然源代码的体积也大了不少。若一定要使用 div 标签,也可以通过 white-space 来控制 div 中内容显示的样式,此举也是可以的。7 l2 f, @5 w3 `; ~4 U7 y% m0 _
本人认为,在源代码中使用 pre 标签作为代码容器是首选,后期前端再用其他的 javascript 代码高亮插件美化渲染,那又另当别论。使用 css 将 pre 中内容换行的样式如下,测试发现效果还不错。
+ Q. n! _6 \ E8 c2 D$ T; k<style>
, O. K& K. v$ G, P+ g) ?( p. spre{
0 `# m) q+ g; b6 Z- z) g Pwhite-space: pre-wrap; /* css-3 */
2 r" v: N* p% K1 S* G' e0 ~9 \white-space: -moz-pre-wrap; /* mozilla, since 1999 */! |- t( X$ u3 D- l0 P+ T/ o3 L7 T
white-space: -pre-wrap; /* opera 4-6 */$ J Y8 A% R/ C8 n6 s
white-space: -o-pre-wrap; /* opera 7 */
3 G( t% O' ]8 A% [2 m: @word-wrap: break-word; /* internet explorer 5.5+ */: K. m8 V1 D" }) g8 C7 T
overflow: auto;7 ]5 P7 q0 T. V1 I/ \% V( g
word-break: break-all;7 h% g: O; ^ k& o( c+ M; r! I. Y
word-wrap: break-word;
9 K$ R# t: [2 ]}
* }4 A- Q( }0 O2 F! w</style>
# C3 j, j8 S5 I K2 u+ y b0 ]2 C9 ~3 z0 e0 c
更多网页制作信息请查看: 网页制作 |
|