有关div自动换行的研究（包括兼容性）

 1,正常的、已经断了句（即已经有标点符号）的中文字段或英文字段，当这行字达到层的给定宽度时，就自动换行：


HTML代码
<div style="width:345;">如果负数是虚构出来的话，那么虚数也是虚构的。虚数是为了给负数开方根的需要而提出来的。就像求“两个数的和是10，积是40的数。”我们只能说没有实数解，不能说不存在这样的数，因为负数是存在的，所以负数的N方根也应该存在，不然就不应该有负数的存在。</div>

2,还是正常的、已经断了句（即已经有标点符号）的中文字段或英文字段，当这行字达到层的给定宽度时，你想让它不换行,就加个样式white-space:nowrap这行字就一直延长下去，这就是强制不换行：


HTML代码
<div style="width:345;white-space:nowrap">如果负数是虚构出来的话，那么虚数也是虚构的。虚数是为了给负数开方根的需要而提出来的。就像求“两个数的和是10，积是40的数。”我们只能说没有实数解，不能说不存在这样的数，因为负数是存在的，所以负数的N方根也应该存在，不然就不应该有负数的存在。</div>

3,非正常的英文字段，既不加任何标点符号的、连续文字或字母，在给定宽度或不给定宽度的层里，永远不换行：


HTML代码
<div>45454545454545454545llllllllll454545454544545lllloioioiiioioioioioio45454545454545454545llllllllll454545454544545lllloioioiiioioioioioio45454545454545454545llllllllll454545454544545lllloioioiiioioioioioio45454545454545454545llllllllll454545454544545lllloioioiiioioioioioio45454545454545454545llllllllll454545454544545lllloioioiiioioioioioio45454545454545454545llllllllll454545454544545lllloioioiiioioioioioio45454545454545454545llllllllll454545454544545lllloioioiiioioioioioio</div>


这种非正常的字段，你给它加上word-break:break-all它就乖乖地被强制换行：

此代码在firefox下并不换行，但我们可以使用另一种方法，即在长字符串中间加入建议换行标志<wbr>（可以每隔几个字符加一个，如：1111111111<wbr>1111111111<wbr>11111111）这样，ie和firefox都能智能换行了。哈哈。。。,


HTML代码
<div style="width:345;word-break: break-all;">556565656565656kjjdsdsdkshkshdshdhhdadadeerweruroweroweroweyroweroewroeroeroweorwoeroweroiuoieroii45350328023404032idowdosadusoidsdsiduasduasdasdsd</div>

 

注意：经过测试，上段代码在firefox下没有换行，ie下可以。

当div中内容为中文时，ie 和firefox下均正常。

 

当内容为非中文字符，当在一行显示不下次单词时，ff会在下一行整体显示此，而ie则会将此单词截断，剩下的部分在下一行显示。

语法：
 
word-break : normal | break-all | keep-all
 
参数：
 
normal : 　依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本
 
说明：
 
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文，应该使用break-all 。
对应的脚本特性为wordBreak。请参阅我编写的其他书目。
 
示例：
 
div {word-break : break-all; }

 

 

[本日志由 puterjam 于 2004-11-26 10:25 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: