[分享] CSS技巧：word-wrap同word-break的区别

snowfox373

我是奥运火炬手,Oh YeaH!

管理员

Rank: 30

刘翔快跑啊~~~

UID: 4976
帖子: 9198
精华: 15
积分: 13257
金币: 216 个
共享: 901 个
行业: 建筑设计
阅读权限: 200
在线时间: 770 小时
最后登录: 2008-9-6

楼主大中小发表于 2007-12-9 21:44 只看该作者

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

本文列举了兼容 IE 和 FF 的换行 CSS 推荐样式，详细介绍了word-wrap同word-break的区别。

　　兼容 IE 和 FF 的换行 CSS 推荐样式

　　最好的方式是

复制内容到剪贴板

代码:

word-wrap:break-word; overflow:hidden;

而不是

复制内容到剪贴板

代码:

word-wrap:break-word; word-break:break-all;

也不是

复制内容到剪贴板

代码:

　　word-wrap:break-word; overflow:auto;

　　在 IE 下没有任何问题，在 FF 下，长串英文会被遮住超出的内容。
  v6 i" L& g9 K# v3 j( p% C
　　word-wrap同word-break的区别/ K& b( ~9 L# q4 n  v8 g3 [

　　word-wrap:% |+ L) T7 ~, Z: h7 L  y) s, @
2 e' ?+ T& N3 N% _
　　normal　 Default. Content exceeds the boundaries of its container.

　　break-word Content wraps to next line, and a word-break occurs when necessary. 必要时会触发word-break。& U* H9 V5 ?& y2 V6 ?( Z
0 e2 E0 ?3 s- s: R) ~
　　word-break:

　　normal　 Default. Allows line breaking within words. 好像是只对Asian text起作用。  s5 u3 P9 E. h/ e

　　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.  C1 x! y! d1 r8 e. l
8 {. I/ S+ P5 Q3 f/ w, E- G. o7 _! l
　　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.

　　总结如下：6 z' F- R; B6 b1 H+ t# c" R& }

　　word-wrap是控制换行的。

　　使用break-word时，是将强制换行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。
# W/ l5 ?7 E; k9 C4 @, S
　　break-word是控制是否断词的。5 v( O4 B9 J! K8 g: H

　　normal是默认情况，英文单词不被拆开。

　　break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。

　　keep-all，是指Chinese, Japanese, and Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。（英文语句正常。）
7 l& W8 J" T7 `) f* }* z
　　ie下：

　　使用word-wrap:break-word;所有的都正常。

　　ff下：2 F2 p) b5 [. u( E% `+ j, T9 X
* q9 P' H5 y8 [( b" B( c
　　如这2个都不用的话，中文不会出任何问题。英文语句也不会出问题。但是，长串英文会出问题。
$ V" J- _3 `# x5 v
　　为了解决长串英文，一般用word-wrap:break-word;word-break:break-all;。但是，此方式会导致，普通的英文语句中的单词会被断开（ie下也是）。9 P& o# k/ p8 U( Y3 [3 o2 o+ G

　　目前主要的问题存在于长串英文和英文单词被断开。其实长串英文就是一个比较长的单词而已。( x" s) ?+ \# ?# `  T. P" {

　　即英文单词应不应该被断开那？那问题很明显了，显然不应该被断开了。

　　对于长串英文，就是恶意的东西，自然不用去管了。但是，也要想些办法，不让它把容器撑大。' u, L6 \% H; d" I* V) A

　　用：overflow:auto; ie下，长串会自动折行。ff下，长串会被遮盖。

　　所以，综上，最好的方式是word-wrap:break-word;overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。% k: o, T- |9 c1 J. K+ r# T
- u1 a( m8 U% a  ~% D; m' R
　　word-wrap:break-word;overflow:auto;在ie下没有任何问题。在ff下，长串会被遮住部分内容。

　　另，测试代码如下：+ f" T; M2 M* R5 ^  O+ |
3 f0 p/ l( I2 B; N& p5 d
　　1.htm0 ?6 D+ D" @, a0 E  U
8 Q* U5 e) l# \# m6 o
　　<style> " H, F$ j# C+ S5 x
' Q; p# t' ~3 l8 Q) w- ~
　　.c1{ width:300px;　 border:1px solid red}

　　.c2{ width:300px;word-wrap:break-word;　 border:1px solid yellow}

　　.c3{ width:300px;word-wrap:break-word;word-break:break-all;　 border:1px solid green} , R; J2 ?% ?  @& r
3 ?1 i% t) l7 Q, V* K- p2 v
　　.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue} 6 ?5 b: W+ _4 p# d) D: O2 \

　　.c5{ width:300px;word-break:break-all;　 border:1px solid black} - Y0 \. N/ w. q/ n
& z! ~$ v: w, V' @) k
　　.c6{ width:300px;word-break:keep-all;　 border:1px solid red} & V6 V. f- [$ \2 F
( R/ i* s. d5 a( e' |( _  F
　　.c7{ width:300px;word-wrap:break-word;overflow:auto;　 border:1px solid yellow} : [' S$ B% k- p0 p4 f$ s, {, S
$ o+ B- ~8 \! J7 X, C0 d
　　</style>

　　.c1{ width:300px;　 border:1px solid red}' H2 W8 V5 _$ R% I7 ^# n& Z/ ?

　　<div class="c1">asdasd1 z  c2 m$ V- c8 V3 h' W9 S

   </div>  J, g' V, p+ V2 x0 r
3 a) }  X" i/ H/ G+ W3 z) Y
　　<div class=c1>% o% C3 A3 J5 e6 R

　　This is all English. This is all English. This is all English.5 Z$ u6 h" A0 w4 v& U  H7 j

　　</div>: `5 A  q; s6 j& A( k$ O. S

　　<div class=c1>
+ W# y# I* H1 }0 F
　　全是中文的情况。全是中文的情况。全是中文的情况。4 r0 ?3 E5 J3 `% h: G' @& F

　　</div>
' R- L6 ^9 J6 V+ J
　　<div class=c1>
* [' j6 _: W- ?5 @( h7 c' _
　　中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.' v1 C- x  S8 f
, u: i8 L# B$ l, q( l4 V/ I6 l# Z5 }6 D5 u) y
　　</div>
+ {/ f. Y) \( E5 T7 D4 Z
　　<br>+ [; t& v" B$ {9 f7 W1 K) m
$ e0 N$ g& X/ a" b" x- t6 U
　　.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}' i( `$ m, |- A$ p8 b" z! u
+ ?, c' F/ U3 C
　　<div class="c2">
; ]+ t( [: c: L0 \8 {% j1 r8 B% D
　　safjaskflasjfklsajfklasjflksajflksjflkasjfksafj6 w! J8 _) R& ]( e

　　</div>
$ g" Y3 u- k. F# n8 K3 h7 M: ]! W
　　<div class=c2>) M. q" ^- w  Y! W" l4 e
% {5 F/ `0 L+ W7 x0 ?3 Y" m
　　This is all English. This is all English. This is all English.

　　</div>+ S! n. B! r& F; w
, u1 s" y9 q( J% R0 L+ u7 @) \
　　<div class=c2>( ^1 y' Y0 W2 z( ?* L) s7 E; T$ b: m
# H9 h( G9 |% c- w7 S1 p
　　全是中文的情况。全是中文的情况。全是中文的情况。7 k3 r& b# K8 H) N2 R  n1 I

　　</div>- l( G& ?, h0 r* h" }) j

　　<div class=c2>

　　中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.) y- s1 y* h; X
  b# ~3 G+ r, H! T
　　</div>

　　<br>

　　.c3{ width:300px;word-wrap:break-word;word-break:break-all;　 border:1px solid green}- Y/ x9 B% p1 \( h

　　<div class="c3">

　　safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

　　</div>+ ?# E7 e# W6 @% j

　　<div class=c3>1 T/ F# P3 i3 m* Y" q5 ^1 l

　　This is all English. This is all English. This is all English.1 `6 w0 F1 y* M0 `8 b9 X" M* |

　　</div>

　　<div class=c3>

　　全是中文的情况。全是中文的情况。全是中文的情况。
( {" l  ]! R% y4 B) D0 M" P8 k
　　</div>) b" K) J1 F; }* g+ H8 o
- D; D! |/ H: A6 E
　　<div class=c3>

　　中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
# d- l9 @2 D9 h! B: T1 q
　　</div>

　　<br>& `; E  n2 s$ ?. w, w
4 K, |) O6 Z8 D/ f0 v; x
　　.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
0 Q, R  v/ Y; g# K0 I! b
　　<div class="c4">

　　safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
0 n' G$ ~* T8 \' Q+ X9 d
　　</div>/ T& k5 Q+ Q' O2 R1 X
7 I" u+ {  Q, M6 o& Q! [
　　<div class=c4>
  P1 |3 K) P5 q& Q, ?
　　This is all English. This is all English. This is all English.! k1 m5 O5 C5 e1 {0 J* R

　　</div>0 z! `0 P9 z# ?7 q% c8 H
7 t1 n# G+ ~: A: \/ C
　　<div class=c4>

　　全是中文的情况。全是中文的情况。全是中文的情况。

　　</div>  h/ {8 F$ e5 `3 c

　　<div class=c4>. i$ x6 G: D! a6 u# S* g4 e$ D
- _2 F5 \4 a+ X, ?
　　中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.  }# @1 N1 |) b7 w3 Y
: z: i6 i4 v8 q% c: R6 i9 ^
　　</div>2 U, z1 Q9 D5 k- Y9 R

　　<br>4 u- d+ A" G7 [! K
) Y4 |9 r2 F; N, u$ Q2 T& ?
　　.c5{ width:300px;word-break:break-all;　 border:1px solid black}7 W+ N4 n( A) @/ c$ W+ }% P6 Y
4 ]' Q7 n$ x, z2 z1 D( c- J
　　<div class="c5">

　　safjaskflasjfklsajfklasjflksajflksjflkasjfksafj( m6 s6 K- w$ e

　　</div>

　　<div class=c5>; k$ c  |  p9 e6 W# a, _
' M' q8 }- n6 K  a: C: y
　　This is all English. This is all English. This is all English.

　　</div>
( P0 ~+ k8 e) _. E. b
　　<div class=c5>7 z& W6 k$ s. C  ~6 z0 y, J, }2 C
3 S0 w3 i4 J. ]/ z4 [
　　全是中文的情况。全是中文的情况。全是中文的情况。5 Y4 d, p/ ~+ X2 P& f$ H5 A

　　</div>. X/ V* m+ U7 u4 g+ Y" v9 i
6 e- w0 |8 p5 |. ^# N4 p* Y
　　<div class=c5>% x' B: N6 c0 m, m4 C  v4 u& g
) g1 w8 f2 U/ ?$ a0 C4 z0 z7 Z
　　中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English., H) X/ e2 c& ], c, c

& w9 }$ f& `  J  m% |% b
　　</div>% _+ v  Z$ b* l) b3 w5 e/ }( @/ W( I
: w  |0 R8 @$ ]  b: g
　　<br>

　　.c6{ width:300px;word-break:keep-all;　 border:1px solid red}
% ~' T8 U; P  J0 S$ F! m0 S2 b
　　<div class="c6">

　　safjaskflasjfklsajfklasjflksajflksjflkasjfksafj- D. y# Y+ A4 _5 B; z
1 V+ t4 ]: Y, f* b2 ~0 Y6 N
　　</div>2 F; D/ I2 K: J8 _- }  B6 ^' y0 J
$ q" |" t$ w' \
　　<div class=c6>

　　This is all English. This is all English. This is all English." o1 q/ k5 F( [8 s  E6 k

　　</div>
! x0 r/ \5 s5 @, t/ L* E
　　<div class=c6>% ~- P; e( A. h4 }* {  G; g

　　全是中文的情况。全是中文的情况。全是中文的情况。

　　</div>3 {# o0 T9 Y' a. I% [, D4 t
7 B" w7 l& H- o8 O7 p% j# t
　　<div class=c6>

　　中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.- a) `) q" H+ p. ?

　　</div>6 P$ L) W; x& t
& r6 n: @: v5 S' k' r
　　<br>

　　.c7{ width:300px;word-wrap:break-word;overflow:auto;　 border:1px solid yellow}, C  `2 H) }% @: {8 Q
6 v' k# l( O2 m2 `* U
　　<div class="c7">

　　safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

　　</div>$ o6 M+ e( i: P% _
4 b  b9 F$ Z3 U& Y. s
　　<div class=c7>
$ @" @0 e: n( x* C& E
　　This is all English. This is all English. This is all English.
* H  ^8 F/ \7 Y- M: I5 T' R( [
　　</div>
( H- U" R3 i0 F4 P6 j$ I/ R
　　<div class=c7>1 `2 @, m/ P) ~( h- g  J# J  l
( I# B( V, b' v5 N8 V% I
　　全是中文的情况。全是中文的情况。全是中文的情况。

　　</div>; q0 S9 Y* ~, w: ^
4 L0 T& [. V* X/ R
　　<div class=c7>

　　中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.0 t" q' l$ a4 e0 w1 Q2 T5 G" L" _
) m6 M# r' O9 x0 [6 ?3 W
　　</div>

搜索更多相关主题的帖子: CSS 技巧

赠人玫瑰，手有余香。

TOP

‹‹ 上一主题 | 下一主题 ››

[分享] CSS技巧：word-wrap同word-break的区别

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

代码:

代码:

代码:

狼一样的团队，鹰一样的个人！