html 中的 pre 标签默认是不会换行的,即使声明了 word-wrap 和 word-break 属性也没有效果;div 标签可以很方便的换行,不会把页面撑破。因为这个原因,很多网站在显示代码的时候使用 div 来作为容器。使用 div 标签装载代码有个弊端,就是冗余内容太多,换行,制表符,空格等都需要转换,自然源代码的体积也大了不少。若一定要使用 div 标签,也可以通过 white-space 来控制 div 中内容显示的样式,此举也是可以的。
( }3 Q, g: E- Z; E5 K本人认为,在源代码中使用 pre 标签作为代码容器是首选,后期前端再用其他的 javascript 代码高亮插件美化渲染,那又另当别论。使用 css 将 pre 中内容换行的样式如下,测试发现效果还不错。, {9 u9 P4 i# k( _) p; Y
<style>0 L, x' N. Z9 y" p. L" P
pre{
2 b1 i5 A, B/ I0 o0 owhite-space: pre-wrap; /* css-3 */4 V$ \* {3 x7 [! O
white-space: -moz-pre-wrap; /* mozilla, since 1999 */ @! P V; c% `& T8 g# L/ Q
white-space: -pre-wrap; /* opera 4-6 */
7 [" B5 r% m: g" Y+ F. ` Z2 J+ [white-space: -o-pre-wrap; /* opera 7 */9 w6 ?; r+ I6 _1 ?5 } W
word-wrap: break-word; /* internet explorer 5.5+ */
2 ]; f2 u4 s. \% a4 ~1 G$ boverflow: auto;
$ O: R3 D6 _& n+ C% C J) }word-break: break-all;1 M- N/ h9 o" A6 v
word-wrap: break-word;
* y& {9 K, y% I4 Q: f}; y) b7 t0 ?2 ~
</style>
2 ?" [! n% M5 A0 f0 Y5 o6 Z4 l3 N& N/ {2 `. |/ i
更多网页制作信息请查看: 网页制作 |
|