技巧驱动
科技创新

wordbreak特别文字

1.主动换行 word

word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容主动换行。

它们的差别就在于:

1,word-break:break-all 例如div宽200px,它的内容就会到200px主动换行,假设该行末尾有个英文单词很长(congratulation等),它会把单词截断,变成该行末尾为conra(congratulation的前端部分),下一行动tulation(conguatulation)的后端部分了。

2,word-wrap:break-word 例子与下面一样,但差别就是它会把congratulation全部单词算作一个全体,假设该行末尾宽度不敷显示全部单词,它会主动把全部单词放到下一行,而不会把单词截断掉落的。

3,word-break;break-all 支撑版本:IE5以上 该行动与亚洲说话的 normal 雷同。或许可非亚洲说话文本行的随便任性字内断开。该值合适包含一些非亚洲文本的亚洲文本。 WORD-WRAP:break-word 支撑版本:IE5.5以上 内容将在界线内换行。假设须要,词内换行( word-break )也将产生。表格主动换行,防止撑开。 word-break : normal | break-all | keep-all 参数: normal : 按照亚洲说话和非亚洲说话的文本规矩,许可在字内换行 break-all : 该行动与亚洲说话的normal雷同。或许可非亚洲说话文本行的随便任性字内断开。该值合适包含一些非亚洲文本的亚洲文本 keep-all : 与一切非亚洲说话的normal雷同。关于中文,韩文,日文,不准可字断开。合适包含大批亚洲文本的非亚洲文本 语法: word-wrap : normal | break-word 参数: normal : 许可内容顶开指定的容器界线 break-word : 内容将在界线内换行。假设须要,词内换行(word-break)也行产生解释:设置或检索当以后行逾越指定容器的界线时能否断开转行。

对应的脚本特点为wordWrap。请参阅我编写的其他书目。 语法: table-layout : auto | fixed 参数: auto : 默许的主动算法。构造将基于各单位格的内容。表格在每单位格读取计算以后才会显示出来。速度很慢 fixed : 固定构造的算法。在这算法中,程度构造是仅仅基于表格的宽度,表格边框的宽度,单位格间距,列的宽度,而和表格内容有关解释:设置或检索表格的构造算法。对应的脚本特点为tableLayout。

建议:word-break 用3C检测会显示成绩的,招致百度快照也会出成绩-这个属性OPERA FIREFOX 浏览器也不支撑 word-break属性可以用white-space:normal;来代替,如许在FireFox和IE下就都能精确换行,并且要留意,单词间的空格不克不及用 来代替,不然不克不及精确换行。

我在网站上实验过确切不支撑,你可以再W3C验证一下

2.word

另,测试代码以下: 1.htm .c1{ width:300px; border:1px solid red} safjaskflasjfklsajfklasjflksajflksjflkasjfksafj This is all English. This is all English. This is all English. 满是中文的情况。

满是中文的情况。满是中文的情况。

中英文混排的情况。Chinese and English. 中英文混排的情况。

Chinese and English. .c2{ width:300px;word-wrap:break-word; border:1px solid yellow} safjaskflasjfklsajfklasjflksajflksjflkasjfksafj This is all English. This is all English. This is all English. 满是中文的情况。满是中文的情况。

满是中文的情况。 中英文混排的情况。

Chinese and English. 中英文混排的情况。Chinese and English. .c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green} safjaskflasjfklsajfklasjflksajflksjflkasjfksafj This is all English. This is all English. This is all English. 满是中文的情况。

满是中文的情况。满是中文的情况。

中英文混排的情况。Chinese and English. 中英文混排的情况。

Chinese and English. .c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue} safjaskflasjfklsajfklasjflksajflksjflkasjfksafj This is all English. This is all English. This is all English. 满是中文的情况。满是中文的情况。

满是中文的情况。 中英文混排的情况。

Chinese and English. 中英文混排的情况。Chinese and English. .c5{ width:300px;word-break:break-all; border:1px solid black} safjaskflasjfklsajfklasjflksajflksjflkasjfksafj This is all English. This is all English. This is all English. 满是中文的情况。

满是中文的情况。满是中文的情况。

中英文混排的情况。Chinese and English. 中英文混排的情况。

Chinese and English. .c6{ width:300px;word-break:keep-all; border:1px solid red} safjaskflasjfklsajfklasjflksajflksjflkasjfksafj This is all English. This is all English. This is all English. 满是中文的情况。满是中文的情况。

满是中文的情况。 中英文混排的情况。

Chinese and English. 中英文混排的情况。Chinese and English. .c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow} safjaskflasjfklsajfklasjflksajflksjflkasjfksafj This is all English. This is all English. This is all English. 满是中文的情况。

满是中文的情况。满是中文的情况。

中英文混排的情况。Chinese and English. 中英文混排的情况。

Chinese and English.。

3.Word

Word-break 和word-wrap的差别:

word-break是控制能否断词的。

normal是默许情况,英文单词不被拆开。

break-all,是断开单词。在单词到界线时,下个字母主动到下一行。重要处理了长串英文的成绩。

word-wrap是控制换行的。

应用break-word时,是将强迫换行。中文没有任何成绩,英文语句也没成绩。然则关于长串的英文,就不起感化。

4.css 中没有word

是否是说话的缘由

word-break : normal | break-all | keep-all

参数:

normal : 按照亚洲说话和非亚洲说话的文本规矩,许可在字内换行。

break-all : 该行动与亚洲说话的normal雷同。或许可非亚洲说话文本行的随便任性字内断开。该值合适包含一些非亚洲文本的亚洲文本。

keep-all : 与一切非亚洲说话的normal雷同。关于中文,韩文,日文,不准可字断开。合适包含大批亚洲文本的非亚洲文本。

5.word

1、word-wrap:break-word,内容将在界线内换行,仅用于块对象,内联对象要用的话,必须要设定height、width或display:block或position:absolute。

2、word-break:break-all,用于处理单词折断。

3、white-space:no-wrap用于处理元素内的空白,只在一行内显示。

4、overflow:hidden,超出界线的部分隐蔽。

5、text-overflow:elipsis,超出部分显示省略号。

转载请注明出处51数据库 » wordbreak特别文字