html 中的 pre 标签默认是不会换行的,即使声明了 word-wrap 和 word-break 属性也没有效果;div 标签可以很方便的换行,不会把页面撑破。因为这个原因,很多网站在显示代码的时候使用 div 来作为容器。使用 div 标签装载代码有个弊端,就是冗余内容太多,换行,制表符,空格等都需要转换,自然源代码的体积也大了不少。若一定要使用 div 标签,也可以通过 white-space 来控制 div 中内容显示的样式,此举也是可以的。5 S1 k5 ^- S* S0 O5 K9 g; O/ m
本人认为,在源代码中使用 pre 标签作为代码容器是首选,后期前端再用其他的 javascript 代码高亮插件美化渲染,那又另当别论。使用 css 将 pre 中内容换行的样式如下,测试发现效果还不错。
5 @4 v1 h* l" ]! H% v8 t<style>2 f: X1 @. ]1 \; A# R
pre{
# Z3 J4 B+ O; @6 r- u8 Swhite-space: pre-wrap; /* css-3 */
, Q# K( z' H% p! g* Lwhite-space: -moz-pre-wrap; /* mozilla, since 1999 */' N% r7 I; B$ W: w3 l& B+ G& u
white-space: -pre-wrap; /* opera 4-6 */
. m7 N! _/ K3 X. b& b3 Lwhite-space: -o-pre-wrap; /* opera 7 */ T1 M- O, x" W; O; T/ S
word-wrap: break-word; /* internet explorer 5.5+ */
% t1 ?: J! @( k6 ?( ]6 Noverflow: auto;
' C( o# m8 T/ F& A/ L# Eword-break: break-all;
4 L, A! ]- ?2 z: o& sword-wrap: break-word;1 E) A1 C4 q9 n* j* w9 U( J( P
}2 o, |9 X- }; a& O. z# U# W
</style>
* N; F2 d) N; @7 o) d3 n$ i
+ P+ L$ R% p; Z& V0 D: V, Z* o+ Z1 b4 [更多网页制作信息请查看: 网页制作 |
|