Yooge.Net - 甬派设计

投递文章 投稿指南 甬派设计公告: 新风格大家是否习惯?模板是否兼容?欢迎大家测试。问题反馈: QQ:285559800   邮箱:yooge.n...
搜索: 您的位置甬派设计 >> 网站运营 >> 建站经验 >> 查看资讯

英文单词的自动换行问题可以说折磨过很多人

2008-5-07 06:09   来源: 本站原创   作者:webmaster   【 评论:0

核心提示:如果一个单词写很长,会把表格给撑破的,而管了的话就会拆开英文单词. 防止表格被撑破 这个问题曾经有很多人提及的,后来在早期的版本里我也解决过,可是导致了英文词语被拆散换行,所以在做新的模板时没有加上控制.
如果一个单词写很长,会把表格给撑破的,而管了的话就会拆开英文单词.
yMd%q0I et甬派设计R'p*og/T+U K
防止表格被撑破甬派设计 B m&Ok)z$m
甬派设计\B\{8P#L$b
这个问题曾经有很多人提及的,后来在早期的版本里我也解决过,可是导致了英文词语被拆散换行,所以在做新的模板时没有加上控制此项的一些css码。今天试验了一下,发现解决的方法很简单。甬派设计 dwz/g%Nnx-L1_
甬派设计 R2OKM0Y
甬派设计"GTU q"Bj{
按照网上大多数文章的说法,只要在CSS中加入:
R:L5v _%m@,f@(r代码甬派设计'Jz9e5^&_4JX/v
..........
ab8G4a%@甬派设计-SM)[A)Bl&j p H
甬派设计D#QqSO QASHs
甬派设计*~,U3l4V%w } N
table {<br />甬派设计 c:hG.b.Y T{f i6?(r
table-layout:fixed;word-break:break-all;word-wrap:break-word;}<br />甬派设计 ~EZRrA+R
div{word-break:break-all;word-wrap:break-word;}
r9Y-tO?9_$~甬派设计/{%T`%^p
甬派设计1A g)q}.L,RV4Dac
就可以解决表格和层被撑破,最初我也是这样做的。不过这样的代码会造成一个问题,你会发现英文词全部被截断了,这不符合英语的书写习惯也不利于阅读。
0}af#O6z;RF甬派设计&vMYBJAk:{ P
后来我发现上述代码改写一下就可以做到既防止表格/层撑破又防止单词断裂了。甬派设计4k+]m5~'q-@y$A
如下:甬派设计 WB~)i"tx%m
代码
[?u'uE `4\y甬派设计bR+n3X.ciV4ES#A
table {甬派设计9KbL1[dh
table-layout: fixed;甬派设计tC*_;Y)`+bJ4p
word-wrap:break-word;甬派设计3RlU\1i3t8@
}
+e N tGq0k/f/B {div {
$sVvF Z%Ob1S!wkword-wrap:break-word;甬派设计 g4FmB| H%C$k`
}甬派设计Xp:|t&d,TP D

L3mt+k\D甬派设计$n4K.B7o*m@
这也是现在我用的代码。
.v Z0u)Tcv3x)Zx(S-----------------------------------------------------
D&Cp^N)wDfA
!RhlD9_$_6w,Q根据 苏昱(Rainer Su) 的 CSS2中文手册甬派设计XE U#j2zb r |

8pK\.Z6z8B1a_word-break版本:IE5+专有属性 继承性:有甬派设计$x;Wx ]lM*X-@!AT0kA
语法:甬派设计4Ry%A"_csh.O~2`
word-break : normal | break-all | keep-all甬派设计 AI$Or8n.m
取值:
ea @ g n;gnormal :  默认值。允许在词间换行
#Sx$_ `"mP"l*D;S/|break-all :  该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
#U0?"h$VK$WJkeep-all :  与所有非亚洲语言的 normal 相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本甬派设计_Ewe z;H%L
甬派设计#S@E7U3r,B/a-n| W:l
说明:
+@1yr3pC%L)A#I设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。甬派设计uw5pJ0a4AZ Jj
对于中文,应该使用 break-all 。甬派设计7DS8^*i I:F%SP'C
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
c#n!`)KH6wY!s对应的脚本特性为 wordBreak 。甬派设计l:A D9X%v2d
示例:甬派设计 _q L:`4Al ^
div {word-break : break-all; }甬派设计b@A$Pd;Bd2d'A d"Uo
应用于:甬派设计Zi/`d6s4QW aF4n
IE5.0+
QF^%k;y;a%L;m;t
hB6THLx3IB2lword-wrap版本:IE5.5+专有属性 继承性:有甬派设计#I(qM GF
语法:甬派设计%|Ea{#Z0v-@
word-wrap : normal | break-word甬派设计 h/x`1w \V#H,}
取值:甬派设计 ];^,L t7H B b4Pv
normal :  默认值。允许内容顶开指定的容器边界甬派设计f0VmH[ mFb
break-word :  内容将在边界内换行。如果需要,词内换行( word-break )也将发生甬派设计M nQWqS p"v

6G LZc-IN]^M说明:甬派设计*U X6Z.z,xQih F0n
设置或检索当当前行超过指定容器的边界时是否断开转行。甬派设计4PL n bB @
此属性仅作用于有布局的对象,如块对象。内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。
CH)FYX&yx+~;~此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
a#kB(x/Nd2[F对应的脚本特性为 wordWrap 。甬派设计5v.}^-m/EH'YN
示例:甬派设计 `wlQ*D L],I-O
div { word-wrap: break-word; word-break: break-all; }
V T+X.dQ3N;`
*\;LQ-s4j*[G
v!U7W%\9k Fw注意这个甬派设计z0}0]z+|
break-word :  内容将在边界内换行。如果需要,词内换行( word-break )也将发生甬派设计(]w-I0BV`Rl
甬派设计7`0xwv`(?L g(V
所以 word-wrap够用了,默认会不拆开单词换行,但是如果真有一个非常长的单词,比如上次某发错了版的史上最恐怖的12个英文单词,它也是会拆行的,这样避免了表格被撑坏。甬派设计/@0Q.s)NM.o+|&hD}
不过这个没有被w3c作为css2的标准,所以Mozilla 不支持这个属性,如果大家都好好写英文单词就没事情,Firefox也是不拆开单词换行的,如果碰到有人写很长的单词,Mozilla Firefox就不会换行一直撑破了。甬派设计{a4S:IAD
不知道css3会不会把这个属性接受进去,不过说实话,太BT的单词还好是...甬派设计 H^IvbkWyn

468*60 AD

  您看到此篇文章时的感受是:
0
1
0
0
0
0
0
0
欠扁 支持 很棒 找骂 搞笑 软文 不解 吃惊
6
顶一下
3
踩一下

Tags: 英文   自动   单词   折磨  
责任编辑:甬派设计
  • 查看: 193次
  • 上一篇:
  • 下一篇:
  • 请文明参与讨论,禁止漫骂攻击。  验证码: seccode
    甬派设计 - 交流论坛 - 快捷面板 - 站点地图 - 友情链接 - 空间列表 - 站点存档 - 联系我们