html 中的 pre 标签默认是不会换行的,即使声明了 word-wrap 和 word-break 属性也没有效果;div 标签可以很方便的换行,不会把页面撑破。因为这个原因,很多网站在显示代码的时候使用 div 来作为容器。使用 div 标签装载代码有个弊端,就是冗余内容太多,换行,制表符,空格等都需要转换,自然源代码的体积也大了不少。若一定要使用 div 标签,也可以通过 white-space 来控制 div 中内容显示的样式,此举也是可以的。
4 B( ]0 ?: i1 C9 G# C; @本人认为,在源代码中使用 pre 标签作为代码容器是首选,后期前端再用其他的 javascript 代码高亮插件美化渲染,那又另当别论。使用 css 将 pre 中内容换行的样式如下,测试发现效果还不错。. q/ K$ h- a( j
<style>9 C3 s9 T/ v# v3 o
pre{
8 f8 ?& i* R8 m2 hwhite-space: pre-wrap; /* css-3 *// t) ^7 z$ r& H4 v+ R
white-space: -moz-pre-wrap; /* mozilla, since 1999 *// r$ ], U2 U a+ W, M( r
white-space: -pre-wrap; /* opera 4-6 */) N, x: @3 r1 l" |. Y1 B) {
white-space: -o-pre-wrap; /* opera 7 */
1 Z2 l! H% }; O( a) [& ?) iword-wrap: break-word; /* internet explorer 5.5+ */
6 p& C7 Z$ k/ w5 Coverflow: auto;# }4 u) w5 w+ a6 a! X, N5 F
word-break: break-all;) c! b+ [2 a) a% H+ H. F
word-wrap: break-word;
2 W) L) G9 k/ g0 i6 G}* u+ P. a5 T* V7 R. n( u* m d' u
</style>
# H6 B6 T9 K: v1 F5 |% u; r& _$ h+ M' Y' F U5 U& s5 O' z
更多网页制作信息请查看: 网页制作 |
|