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

snowfox373 2007-12-9 21:44

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

本文列举了兼容 IE 和 FF 的换行 CSS 推荐样式，详细介绍了word-wrap同word-break的区别。 LBv1\!~+g3}5o1}l

@8j j0{Tf8Z6x 　　兼容 IE 和 FF 的换行 CSS 推荐样式8RPuBlX$C"]s

oHyL#FIb 　　最好的方式是[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 下，长串英文会被遮住超出的内容。
5Yp8_on2q |
K"Pi-Br,d~U 　　word-wrap同word-break的区别CN-[?.]'H{3w/["T

.b+J3@%j#E]`4W&m/{-a ^ 　　word-wrap:
*pTBI!q&b IDU~2u3l&Y
　　normal　 Default. Content exceeds the boundaries of its container.
e"cBBs ?;ey^8E3o8J/i
　　break-word Content wraps to next line, and a word-break occurs when necessary. 必要时会触发word-break。
Buy*c'y{:W #S5bOgc-rG{s
　　word-break:
-za8w6f5i*K7d} %V,w o Ux[F
　　normal　 Default. Allows line breaking within words. 好像是只对Asian text起作用。
n%t4ilJA
r1`^ H2dV:D*r 　　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.4c\2Z9E7t6WO I/F$j

%D5\Xc\O8hQk8i:Zl 　　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. \zA Yd E)h

*ypCo*jL 　　总结如下：
Ao+_P.RZ p l{{ zgC
　　word-wrap是控制换行的。yA}1r9|Cz;fi
6b`"U{!ZrC tl6?
　　使用break-word时，是将强制换行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。
nV)Z K6r4Pv C O{%bV/@{:X I
　　break-word是控制是否断词的。 Ffb?zI J{

(jl.@x(M#x"T1b*@U 　　normal是默认情况，英文单词不被拆开。
$A ^Io_%_"C
%[)K&O ik)`FU 　　break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。`"n$I"G7d/pk.es

K7BO9azFG/u 　　keep-all，是指Chinese, Japanese, and Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。（英文语句正常。）
m[r]W$`/K\'x
({"Z3~ |,[0F 　　ie下：
*Jp#bJ3x1vL
9f:z$jq+fy 　　使用word-wrap:break-word;所有的都正常。
6Aj y%_vV S%R%j J!m m
　　ff下：
e2qow%n.e4H ,Q?0^2q3EY
　　如这2个都不用的话，中文不会出任何问题。英文语句也不会出问题。但是，长串英文会出问题。/Oe+u U0K |-m+_g
:C)Po N"rW_J!e
　　为了解决长串英文，一般用word-wrap:break-word;word-break:break-all;。但是，此方式会导致，普通的英文语句中的单词会被断开（ie下也是）。S-Y(f} x2Z
`k @l9x!D6VVL
　　目前主要的问题存在于 长串英文 和 英文单词被断开。其实长串英文就是一个比较长的单词而已。4O~l`w^ ^4d+~%J

cl(|"P2q ]N` 　　即英文单词应不应该被断开那？那问题很明显了，显然不应该被断开了。M.`ns*p7F'Z@
7["gD }lv
　　对于长串英文，就是恶意的东西，自然不用去管了。但是，也要想些办法，不让它把容器撑大。
-B4pTtrH{y ]v ([Z9l#b7Z"C
　　用：overflow:auto; ie下，长串会自动折行。ff下，长串会被遮盖。
#N,de#Q R2U-b
$F@s9vJ&p 　　所以，综上，最好的方式是word-wrap:break-word;overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。
6~ p(D#z@N*t
]U ~i4OUu1TQ 　　word-wrap:break-word;overflow:auto;在ie下没有任何问题。在ff下，长串会被遮住部分内容。z4P ^U[9Q ?f1WK
s};^o~6T u
　　另，测试代码如下：
ca-P FC?
/fL_&u-_-t2G:nR 　　1.htmSRS.xD
Q/eMo+Tf2S#X
　　<style>
n4~ D8W8x*KY&a+p)c
`#Wv4`s ?0i1[eCn(bq 　　.c1{ width:300px;　 border:1px solid red} h9z/lRQfpY

m]tY'c1W@ 　　.c2{ width:300px;word-wrap:break-word;　 border:1px solid yellow} 1a|]U"QY7j-C&w

,Y2tt%k$y 　　.c3{ width:300px;word-wrap:break-word;word-break:break-all;　 border:1px solid green}
(P,c2SB `l &X.\;D9TF5@#l%R M
　　.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
&C)Q*v$e%Xv7i ^
3fa`3j&C Go 　　.c5{ width:300px;word-break:break-all;　 border:1px solid black}
^p a#[KF 2F(gV,LM2^ JUh
　　.c6{ width:300px;word-break:keep-all;　 border:1px solid red} {#Wwj&{~ I)`

zbV+PqY-z 　　.c7{ width:300px;word-wrap:break-word;overflow:auto;　 border:1px solid yellow}
^C6CeJ#{Uk;w|:r I*G I5EY&k/a,R |
　　</style>B"J+n4FqP

2w2M,GFo5JG 　　.c1{ width:300px;　 border:1px solid red}1M`!D ?%|#p1K
3d$g8P/_Ni7Z
　　<div class="c1">asdasd$M#K0i,_ I8bt,K

ff4t xcYNY1G x       </div>
$V4qO8E8B d)e ?O(v E cJ
　　<div class=c1>zTF,QP%l4r] X/g

X5v i"Y6m| 　　This is all English. This is all English. This is all English. f|HoP0B9t
qT5S:k8mIL2T
　　</div>
~S6p]Gfv8NG P$E}9M0z9@;KH
　　<div class=c1>JE#_5~tu0d ].N
LH,J6U OY k
　　全是中文的情况。全是中文的情况。全是中文的情况。
]^ zN&h.A z*EP n| _j
l~!m0~!W[t/Q_ 　　</div>
O1hZAb3s
&w+|.f:V#{7W,r l4ttV K 　　<div class=c1>
k&h2H K|F]
JAm#g D` 　　中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.ESB)I u
M:Q*j#bP-H(a
　　</div>
Wh%h'`*Wd%\ }~I&QAK
　　<br>
l kdir7z Q^gk^zXo'J'p
　　.c2{ width:300px;word-wrap:break-word; border:1px solid yellow};\em3A9kYt(xB

0|;n%pt zCd 　　<div class="c2">
.YC?'a?'W G K F+rs4U5C\
　　safjaskflasjfklsajfklasjflksajflksjflkasjfksafj5I#C:g ~F)W}
?M:^2ZZ R Qr
　　</div>EQc(hH&Eg m

J%`1X!B3^n?\ 　　<div class=c2>
`-s;[N-ZJl5y%Q q.Gd]&p#b3bRY
　　This is all English. This is all English. This is all English.
Ze?2xv#U9]{ {$n O2K/w:g4~ X Q
　　</div>] W"Yd!z&[2Y

Hv H,o.O5f 　　<div class=c2>
E.^)}&Tytvf,gZ `D z)Zr h7t
　　全是中文的情况。全是中文的情况。全是中文的情况。
P{c1Vdw9s/q`Gl
+}e7m%`4sj9x-K 　　</div>
5a!H\*a)Rl t3I(L2B-dmz
　　<div class=c2>`(y(UU9}

z6SEysu 　　中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.,ZO:{9pZl?T

[I6?h/k X 　　</div>
IB-I({"F{r%s5D0x V,q9FV3S
　　<br>+QpV.nf*R.k:nQ

5H&{B;JFJ$M 　　.c3{ width:300px;word-wrap:break-word;word-break:break-all;　 border:1px solid green}V(u)U3~$T`hB3P
0S;n9S G} gF5E
　　<div class="c3">
}~vw#| q+U`e%T
Q*g/f%CPh 　　safjaskflasjfklsajfklasjflksajflksjflkasjfksafj F R~Lu(M7yg\:p C
%D#uX;T v.X A,Bt
　　</div>
/OCf8^ \+~Pqk #JQk:?"u%G l+mK0\
　　<div class=c3>}'B0}'agu!y

`0au'jJk&e WNG 　　This is all English. This is all English. This is all English.
Qg-icR(G(m 7Ef!j)_[ `3pd
　　</div>
&[x,zH1_F A
:E:HMao 　　<div class=c3>
o1NpnHL p3c
+GtL.dsWE 　　全是中文的情况。全是中文的情况。全是中文的情况。
5Ix'?QSf
R(Zh@I^ 　　</div>
U'Q/t v d e9I(F@ 7^f+sBu/hhK
　　<div class=c3>;E#|zD7H"x\T4y

&By#hYNg5y9dU 　　中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.:z F1zS N+C%{6V9R

| u,t{O?cy|C,P 　　</div>,Pl&[d)m/J|
,q C'~.y}7F4TF ~
　　<br>
(mY@#V8O | ~{/~N7dR
　　.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}bL;x U0^&{

RLD$b,|]%] 　　<div class="c4">
.N+s K%h!}i;u9h
\8DX%B'}/b.b^$@ 　　safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
CB(G"^-B.nR
@y|1[z$QQ 　　</div>mv%Y'j5{hIIP

NL japMG?i:d)~)K 　　<div class=c4> S)T^f4y[/Wi8l

Q%o`IJ@jX Br}] 　　This is all English. This is all English. This is all English.f-]5`9iua*Q;]I
*T)s*K3Q U;l0~ @%ZN
　　</div>
vG%c*U0x)h0?s /mJ[t*l[
　　<div class=c4>#T4BX6?M k
sWC2F)iGX
　　全是中文的情况。全是中文的情况。全是中文的情况。
[P9c$tk1x8S'c;P 8e^rc,K
　　</div>
(z0c{/O7K&Owj
1KRIGCI\,_.G 　　<div class=c4>se$\*yi#c!y MNM

InW&_,kiP 　　中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
b D!j kk)z8x N;AoykP3N
　　</div>;O`(Q?;e?/S
)X3|\)ZON
　　<br>
(Q I]@r `O l B&L5c+u
　　.c5{ width:300px;word-break:break-all;　 border:1px solid black}
'k+m.L5{.ssM
`7W)h.tbU2t 　　<div class="c5">
(P4G8P&DL$J
/OYo1}'`K3t 　　safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
3T'Da8hl(T \)l;k*f#qY!`
　　</div>
5Bm;P%hx
8{ p R"~`*O\`7U B 　　<div class=c5>
;?]\0yz-e$Q5A
va"{2`"[)CSm 　　This is all English. This is all English. This is all English.;N k p`)kPe)}F J(P

y9qn-{9]wZ [ 　　</div>
5A5^$^SBV,U
U_T)s _ {Fq0e 　　<div class=c5>/b*M]4t v.J6P
&up H4e kv%V
　　全是中文的情况。全是中文的情况。全是中文的情况。2zz*a6aP&A3L@`T%H
,fp&~3?duv)edF
　　</div>
)l$p h}1V;P7n ;jm7d+iGB
　　<div class=c5>2j!NtuP|

!]zC3D4FV b 　　中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.6xXe5u`6@.c
h r`a*{5r9WhD

L+ZS:Vuj%jh 　　</div>S%gOM9eXNU$nA
"hv|T^D+p6|a
　　<br>
o+u kY;PEQ
M ?&U5q\7d 　　.c6{ width:300px;word-break:keep-all;　 border:1px solid red};gv6UZ#o h]

2o\vM2\@ 　　<div class="c6">
ht2|eu6g5a !yt c+xl
　　safjaskflasjfklsajfklasjflksajflksjflkasjfksafj'e)i~"k a1~!El:c T-P
A(yt,U?jP2YLO;q
　　</div>
b Bkl i{ M&[,ZD *t4|/H,T/V4} o9bb
　　<div class=c6>:@*M3} _(tRi$Ru

a#GEo.~k'yb e 　　This is all English. This is all English. This is all English.$O a"kg.xC-JNfXr

h/KT:A#J7E~ 　　</div>
^X#qI&]4BD@V
T!U? t B 　　<div class=c6>*e5Q{D$y

-ytmSd4j0Ui)Bh9r 　　全是中文的情况。全是中文的情况。全是中文的情况。nQ5cSl~e.~

&P;kW'p{W 　　</div>
qM`!|5X7K
\0?R1lC.@/N.W 　　<div class=c6>W5Ez4W!@*H1h-BA

k U A6V0{H+Q 　　中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
@q)vb-lX$v2j(l
a6Yc8`+K'Y 　　</div>
h2mB1o2r`bE&t i*z /v7NjT1n:c'_+i g9P6LV
　　<br>
v0X}7V,g E#W8_ n;TC4r d
　　.c7{ width:300px;word-wrap:break-word;overflow:auto;　 border:1px solid yellow}
9@j.nIGk#O
c@AP q/Sf5x 　　<div class="c7">'N,F O t_6w`.AD
P-V8Gk| Y)l
　　safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
!Hk*sAb:YB V 6l+LA#GL
　　</div>
C"})_aA E%Y'@2sM+[
Xz}7W1v"x PAs!ZF 　　<div class=c7>VVV)jgh
6Z0U"nJe d2qt
　　This is all English. This is all English. This is all English.
oN1YGN R ?
Q!V+{n r] L@ y7d 　　</div>\c n7s,Z9w
N,Xdm%d'a(IpM:z
　　<div class=c7>
"n*n t#F M.s}/OdU 'i8k~"r:Z)BeC
　　全是中文的情况。全是中文的情况。全是中文的情况。
.Ua?*i`H+T9Q!Pu W V
4EQ/P1R%v4\J&]"] 　　</div>
VU4R"NV x_2vWf
　　<div class=c7>8{q'ioS)SGa

Bo%eLCo*~*d 　　中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
cH'B@3feV~$q
L{{5tPi5}c 　　</div>
页: [1]
查看完整版本: CSS技巧：word-wrap同word-break的区别