查看完整版本: CSS技巧：word-wrap同word-break的区别

snowfox373 2007-12-9 21:44

CSS技巧：word-wrap同word-break的区别

本文列举了兼容 IE 和 FF 的换行 CSS 推荐样式，详细介绍了word-wrap同word-break的区别。
#P3T;_+\xY3S.fN)K q*{0Z6lU|v
　　兼容 IE 和 FF 的换行 CSS 推荐样式
;Z"i_V-L8?
~`p [,}k:Ndl{9j 　　最好的方式是[code]word-wrap:break-word; overflow:hidden;[/code]而不是[code]word-wrap:break-word; word-break:break-all;[/code]也不是[code]　　word-wrap:break-word; overflow:auto;[/code]　　在 IE 下没有任何问题，在 FF 下，长串英文会被遮住超出的内容。
o!X D$V_9h M(o-E in8WM
　　word-wrap同word-break的区别4oA0Y!A,jyQN9W

)W9`c0[s3n0x:~#k)Y 　　word-wrap:
M3x vH#l;T5W2hOt oWWI6A P yey
　　normal　 Default. Content exceeds the boundaries of its container.
}:w r:NiVo1P|fc%~ 8z7_H },s
　　break-word Content wraps to next line, and a word-break occurs when necessary. 必要时会触发word-break。
pd,@4j+T0P
7P:N&fzI*J;m 　　word-break:
HLGmrk2` "s3DF:n"B;DM
　　normal　 Default. Allows line breaking within words. 好像是只对Asian text起作用。
E2L6Y2HX x 8WZxIU-k#c3?
　　break-all Behaves the same as normal for Asian text, yet allows the line to break arbitrarily for non-Asian text. This value is suited to Asian text that contains some excerpts of non-Asian text.:S|d T#}9w \

'ln+@U dU 　　keep-all Does not allow word breaking for Chinese, Japanese, and Korean. Functions the same way as normal for all non-Asian languages. This value is optimized for text that includes small amounts of Chinese, Japanese, or Korean. {CO2L~#Q
NYB7jVa$X+\
　　总结如下：
&}? {4a~&z ~P ,C b E/FC(KJ
　　word-wrap是控制换行的。
g zhC'JG 9i#b-]1]%hj
　　使用break-word时，是将强制换行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。
-K;zDdL
_k'}UO!x4nH\b 　　break-word是控制是否断词的。8BEry5N$kY#b)y3@*T

h"F(QI,C 　　normal是默认情况，英文单词不被拆开。
&R1HD Y/o"[:E?GI h:N ZB)Y'Ww
　　break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。
`*{DG Ei%`/{/e U3z{x
| C)U8nZ"fA 　　keep-all，是指Chinese, Japanese, and Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。（英文语句正常。）5]&v `0j `6p-y"S"r
@x+h4dLU[&uq
　　ie下：.[e uwg;Jgj6[

v(gS2Di&C 　　使用word-wrap:break-word;所有的都正常。 x(Z N ~1x
!W'CE6Kd#O f8o
　　ff下：y o*rz)_c6x){F

]BZ&I mmV5w5Tf 　　如这2个都不用的话，中文不会出任何问题。英文语句也不会出问题。但是，长串英文会出问题。:C2i)U u]*I/B0^
W*]\7uQa"f3F7?A R
　　为了解决长串英文，一般用word-wrap:break-word;word-break:break-all;。但是，此方式会导致，普通的英文语句中的单词会被断开（ie下也是）。,I7yev?

wQ9{RzlH(PF 　　目前主要的问题存在于 长串英文 和 英文单词被断开。其实长串英文就是一个比较长的单词而已。
O,}9SyZ g+}M n2^r,B t
　　即英文单词应不应该被断开那？那问题很明显了，显然不应该被断开了。LK:G(|d6KLRr?!?
ayG,Z:XD9SCr#F?
　　对于长串英文，就是恶意的东西，自然不用去管了。但是，也要想些办法，不让它把容器撑大。
`2x,^^*f
;c|~5F*E^c fv{ 　　用：overflow:auto; ie下，长串会自动折行。ff下，长串会被遮盖。FRk*Re;S
0VB0]g/p v M
　　所以，综上，最好的方式是word-wrap:break-word;overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。
-S"Lp:{b"q)W(xGh Egt A1q
　　word-wrap:break-word;overflow:auto;在ie下没有任何问题。在ff下，长串会被遮住部分内容。
Q-ah#`![s sd_2x K S%OJ7\J
　　另，测试代码如下：&^kl7~.r

4_y {@\2taz 　　1.htm
v*shC_b^Z
8H utSbr t 　　<style> ,_+B1y2Q9`w4nm
?Tuqsdp:w
　　.c1{ width:300px;　 border:1px solid red} *]f@dF3pI
%?4K]z[_1V h"d'U
　　.c2{ width:300px;word-wrap:break-word;　 border:1px solid yellow} n Ss{9I mM
Z)tg9kT H |
　　.c3{ width:300px;word-wrap:break-word;word-break:break-all;　 border:1px solid green}
.Qa?j9q3s2c!FX
R!@0jd mF4W\7Dq+\ 　　.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
`Z'\3i@.br#M
%?.^:N:T|6O;o_X1l 　　.c5{ width:300px;word-break:break-all;　 border:1px solid black}
%}CPU,F3Q\ /TA9c e4f2m6Aq%u
　　.c6{ width:300px;word-break:keep-all;　 border:1px solid red}
;V ~C&g o5M"M
)x!Q|4B d 　　.c7{ width:300px;word-wrap:break-word;overflow:auto;　 border:1px solid yellow} | D'Y%}S2a

"R s WX Hk4\ 　　</style>
R#ey"P*C
kYYq7[9MD4|/W7[ 　　.c1{ width:300px;　 border:1px solid red}y&r y9v;D&VkmU

s&U Qx/mdA0^/I qi 　　<div class="c1">asdasdQPIp$?8D

H*n7_E0LQ-@'X       </div>
Gj$e?H9KRR k
qz8s({:P:f W:r 　　<div class=c1>)g?X)N R Ip

o-v7?;J%Wdas }0}#AC 　　This is all English. This is all English. This is all English.#e3B._[)z(IH ur

M9{&bp5f 　　</div>
X!MP)B?.^jU7Ew
4R+[D7v;Z2u c6x 　　<div class=c1>
!x4RZfe-f O3Bv[j/b8w
　　全是中文的情况。全是中文的情况。全是中文的情况。 JCyFtg
B Q6@WWv k@
　　</div>
.K B6j4R4M!A
S0vf)KR {^{ p 　　<div class=c1>$n*I.{E#|~$Kc\

~r\0B-OK#fx 　　中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.|~+njr)z0M1N

d3p mT ~ C9fi 　　</div>
]Fgt\ Kj"RdYE 6h6\C)y"c h
　　<br>5IgB(YF&j@e5W
Y1_+Ny%K.ktC
　　.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}2y8Ih]"l4Y.y\Z
[H#yBx;{2JW#F-z:e[u
　　<div class="c2">L^t&^.Q&X~!KX

ay$E5JqAcv+FY 　　safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
q}HY0pGA3[1V Vn
;j1~_.qTsi6\$z q 　　</div>
5h'`VfK
%us.N4Y@ o Pb 　　<div class=c2>.c,n%dQ7r8[&HFu0S
}x2zd+M [3g{#GA6A
　　This is all English. This is all English. This is all English.
%x&d(W4L@"oO?
/v-el W j y6X-rn 　　</div>!nU.oH]`"ZaN
.JWmu+}~G"b$d5R
　　<div class=c2>
\C8g'c)o-Uj
^'m)g0X3x 　　全是中文的情况。全是中文的情况。全是中文的情况。y4H8?-R[6kYa7S;ySC)h
@d$E4K~G
　　</div>"cdozd(N2Y
.eE(wM bj m
　　<div class=c2>
s,@?2@/t2n-IHL
.@p qc;e,P 　　中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
b"gE } s_)x;x-zfn%z N O C,DfC
　　</div>"LF&B;QK~B wZ

:M*y Y hqU-[ 　　<br>
^ O}/NDi
O8~#My`H9Yj m]y 　　.c3{ width:300px;word-wrap:break-word;word-break:break-all;　 border:1px solid green}OA{+b,v
w1?~{x#_R&A*C|
　　<div class="c3">
8]+\GI-{.j;TI
0cE|Wi DO 　　safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
.Fc)CprR~ 'Uz?1hIk Wp;K
　　</div>
K2u!{+v j'u7rlB gY3N^8{Q
　　<div class=c3>
L$C;H,X Je!aD P!da.Ak6Wi!Y'D
　　This is all English. This is all English. This is all English.
*th*K4Z e A9k'E ~T8[ U)pKV }"j
　　</div>
)J1QU Nw8Q
EY:p3t4G xJd }*j 　　<div class=c3>ye C{ C,R.Ia

1N'T/m)[N.j#Uj 　　全是中文的情况。全是中文的情况。全是中文的情况。e1x v/a;e SE
u@!OR({DV e
　　</div>G;EN A3|#?vK

F:`:\6oOA 　　<div class=c3>
^!k(P:NkY4fzX q{
]*xW%z4@"l#er 　　中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
5~1Y3h.asa&gb L_m:d(K
　　</div> G.zwtye
gz6t3@"D O
　　<br>-|,`(m gO f1frKb

UM_ z,Z$^)H:q 　　.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
)C/t,t hC)O9d/iB L $Y2IN+z+Q6pfj#E
　　<div class="c4">!cx&WcA3Wx @

OG|q qU 　　safjaskflasjfklsajfklasjflksajflksjflkasjfksafjo~5y7E#L"U}8nJ M
.x(`3bf_6H4qZ9~"}
　　</div>N s&l:\5p

"S;O'w;W8COI2cl 　　<div class=c4>j]C ~2P5am
9Ot{(p#iPa
　　This is all English. This is all English. This is all English.mK%gP JW'J0PJ*M:G?

eJ@%dfOW 　　</div>Yjd#k:x6F
+y+};d2Op:s
　　<div class=c4>
R*l7uhs/t U4| D'Y{T!|&fQ#K sb
　　全是中文的情况。全是中文的情况。全是中文的情况。
+T h4of9{"l u"BN`6qi
　　</div>dR fc5z{
"ql l?/[U
　　<div class=c4>
*FKub.Q)`0p Z4d1?.pv
　　中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
;o"r8r2T C(v m 9^,d4M:Da.l
　　</div>I|B%QB Z/u
*v0D{R oAb ?}
　　<br>/I;P!lt)fDi6o T8x7p
7P_9L&B?7G
　　.c5{ width:300px;word-break:break-all;　 border:1px solid black}EUhy9]F%Pm
@8?$Z*ku
　　<div class="c5">
bg#U c CK
V\:p'[gF8y/_sJ Q.e 　　safjaskflasjfklsajfklasjflksajflksjflkasjfksafjE?|3n2Zg~ @1d D-v |

G8W,U5d@ 　　</div>D kW;v jg
.D'~ Mv%qU
　　<div class=c5>Vw7{&^\m.Q"c
M,YQ3\!J&E,D
　　This is all English. This is all English. This is all English.\"Qy j$zqb
e[2D E.z
　　</div>O6Xt'sH,v

#K*H,M1J A+OD 　　<div class=c5>].T} E(a
*I%rkf@*X
　　全是中文的情况。全是中文的情况。全是中文的情况。
b^B'o/? c %z)^!Ucy r"Xs
　　</div>B'M3?{1q

2]_O w |8jR 　　<div class=c5>
2W!wn0l/Cb
~+Uw\duU*Q 　　中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
_~A&| l5m)Y Y4YG_e
8zBR*[ _!l
　　</div>
"]@A1z/W5^~
N6[H/MM-Fi8z&Z 　　<br>
3h:YrF0k#ndk .P%G%yZu elJ,e
　　.c6{ width:300px;word-break:keep-all;　 border:1px solid red}
IZ'p*_v Ql x`
M)C(aJ&Q(@ 　　<div class="c6">
M)wjs5v p:\
NGT[^4H!Y/C 　　safjaskflasjfklsajfklasjflksajflksjflkasjfksafj*k:w|"A`0P f$a

+ljXr$L3j A 　　</div>
g^"Mn ]*X 2gO!b6s w*S H
　　<div class=c6>
$J4K$H}'eLr
-OCL/_rOn 　　This is all English. This is all English. This is all English.
'j ]-k9\ z5zoN
G }2EMR 　　</div>
i/U kA:VW }P fl*b.` Xk-MsUZ c0Y
　　<div class=c6>3x C B8ul \9to`
6^TIE oYO
　　全是中文的情况。全是中文的情况。全是中文的情况。D:O*@@JrL
N{3L aDR_:r
　　</div>
kn6|PV!s9l -eE5\{oQw
　　<div class=c6>
/k$D(y G!@ Vryl hy4Oo8S*v6v5I/i
　　中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.[0`9r{'??\

MR[/mkt:dC$@_ 　　</div>
1Ly Gr ^GPV
2W2Yjw? @:nEW N^ 　　<br>i!`m5m4@(Lt
L@UNx D
　　.c7{ width:300px;word-wrap:break-word;overflow:auto;　 border:1px solid yellow}
!\1MCKE,G3X/]
Z}l3HU?n 　　<div class="c7">7R a0i4G~W

!G3^-R6~C7S 　　safjaskflasjfklsajfklasjflksajflksjflkasjfksafj Bgtr|jq#~G%k
3XO b W,{ k!R,FP!b
　　</div>
"@r?+f|E] p:L i :s],XYdj~
　　<div class=c7> }H:ZiJ4{J

htUn [&^ 　　This is all English. This is all English. This is all English.(Z*L8Z:y6un$LR
6q,O*^+]l"M
　　</div>
%k1J5PQw1[
V`x%F!IE 　　<div class=c7>
7i'Q'\&J9B] r:f*\k]D7dV
　　全是中文的情况。全是中文的情况。全是中文的情况。 Q&G,sn?,Ulq ?

im N;MUV 　　</div>
2du$xd P6e8z.TP)A|;r
kLw{L1K 　　<div class=c7>-qu&Y0u*?+C?QS3[

`#o&Bju)r,g 　　中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
-F_"r;_u
:Z8h\#yu6UL'T-z b([ 　　</div>
页: [1]
查看完整版本: CSS技巧：word-wrap同word-break的区别
查看完整版本: CSS技巧：word-wrap同word-break的区别