CSS学习笔记：文本换行显示（word-wrap）
浏览数：22 /
时间：2015年06月09日
在CSS3中新定义了文本换行属性，word-wrap:
- nomal属性值表示控制连续文本换行。
- break-word属性值表示内容将在边界内换行。如果需要,词内换行（word-break)也会发生。
换行技术比较分析
IE定义了多个换行处理属性：line-break、word-break、word-wrap，另外CSS1定义了white-space，CSS3增加了word-wrap。
- line-break专门负责控制日文换行。
- word-wrap属性可以控制换行。当属性值取word-wrap时，将强制换行，中文文本没有任何问题，英文语句也没问题。但对长串的英文就不起作用，word-wrap:break-word是控制是否断词，而不是断字符。
- word-break属性主要针对亚洲语言和非亚洲语言进行控制换行。当属性值为break-all时，可以允许非亚洲语言文本行内的任意字断开。当属性值为keep-all时，表示在中文、日文、韩文中是不允许字断开的。
- white-space属性具有可视化文本作用，当属性值为nowrap时，表示强制在同一行内显示所有文字。当属性值为pre时，表示显示预定义的文本格式。
在IE浏览器下，使用word-wrap:bireak-word；声明可以确保所有文本正常显示。
在Firefox浏览器下，中文不会出现任何问题，英文语句也不会出现问题，但是长串英文就会出现问题。为了解决长串英文的问题，一般将word-wrap:break-word;和word-break:break-all;声明结合使用。但是，这种方法会导致普通英文单词被断开显示。
为了解决这个问题，可使用word-wrap:break-word;overflow:hidden;,而不是word-wrap:break-word;word-break:break-all;。word-wrap:break-word;overflow:hidden;在IE下没有任何问题，但在Firefox下，长串英文单词的部分内容会被遮住。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
