html 中的 pre 标签默认是不会换行的,即使声明了 word-wrap 和 word-break 属性也没有效果;div 标签可以很方便的换行,不会把页面撑破。因为这个原因,很多网站在显示代码的时候使用 div 来作为容器。使用 div 标签装载代码有个弊端,就是冗余内容太多,换行,制表符,空格等都需要转换,自然源代码的体积也大了不少。若一定要使用 div 标签,也可以通过 white-space 来控制 div 中内容显示的样式,此举也是可以的。
- E4 H/ p6 c$ g, C( C2 z9 {本人认为,在源代码中使用 pre 标签作为代码容器是首选,后期前端再用其他的 javascript 代码高亮插件美化渲染,那又另当别论。使用 css 将 pre 中内容换行的样式如下,测试发现效果还不错。
9 I7 p+ S2 s) k<style>( [( i% U0 |- R! F9 f$ D% Z/ v
pre{
9 L; k# T1 M$ S' rwhite-space: pre-wrap; /* css-3 */- Z1 ~7 x# P3 l- s
white-space: -moz-pre-wrap; /* mozilla, since 1999 */. e9 \1 ^: U/ l; U
white-space: -pre-wrap; /* opera 4-6 *// m* ^9 ?. w9 |. o; F
white-space: -o-pre-wrap; /* opera 7 */
" q( W' `( G2 t" E9 ^word-wrap: break-word; /* internet explorer 5.5+ */
' ]3 A: Y: K& M" i' loverflow: auto;
0 g8 f* S+ Y) [ x) f3 gword-break: break-all;. V+ P) T' X0 \$ e6 I
word-wrap: break-word;
8 n2 \$ k) }; L. M) q}
3 _: h# \* V, k( A$ e0 ^</style>, X" M7 q" Q) U2 w+ W r1 z- ~
6 X3 @0 U( z( P3 d7 O9 K% k8 q/ X
更多网页制作信息请查看: 网页制作 |
|