html 中的 pre 标签默认是不会换行的,即使声明了 word-wrap 和 word-break 属性也没有效果;div 标签可以很方便的换行,不会把页面撑破。因为这个原因,很多网站在显示代码的时候使用 div 来作为容器。使用 div 标签装载代码有个弊端,就是冗余内容太多,换行,制表符,空格等都需要转换,自然源代码的体积也大了不少。若一定要使用 div 标签,也可以通过 white-space 来控制 div 中内容显示的样式,此举也是可以的。# e& N3 W" Q$ x1 j+ p
本人认为,在源代码中使用 pre 标签作为代码容器是首选,后期前端再用其他的 javascript 代码高亮插件美化渲染,那又另当别论。使用 css 将 pre 中内容换行的样式如下,测试发现效果还不错。# Q& O) T8 h: {; o9 \8 i6 r0 ]
<style>+ n2 a# G! D/ n; B2 A
pre{
. h( v9 r+ X7 wwhite-space: pre-wrap; /* css-3 */
/ t/ ~0 l$ y5 iwhite-space: -moz-pre-wrap; /* mozilla, since 1999 */" s0 c# c& [7 o& ~
white-space: -pre-wrap; /* opera 4-6 */
7 A: h1 ?+ F+ ewhite-space: -o-pre-wrap; /* opera 7 */
" ?5 ~6 H9 U& `2 g1 C. f; v* n( d5 Iword-wrap: break-word; /* internet explorer 5.5+ */
" O- h8 X: \5 M1 J6 J6 L; uoverflow: auto;
$ V% I. T G: _2 U `/ h' iword-break: break-all;# s( F: C B; t" U
word-wrap: break-word;
7 T5 R/ @/ \0 p" ]( @) \}, E$ d- c! |$ S! u+ o3 L5 c) e! U
</style>
7 c$ c t d$ {& _" S {% n; V# S+ K, T: B1 ?$ i2 h- ?: I, w! Y y
更多网页制作信息请查看: 网页制作 |
|