CSS学习笔记：文本换行显示（word-wrap）

标签：style   color   使用   sp   问题   c   line   ef   r   

在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下，长串英文单词的部分内容会被遮住。

CSS学习笔记：文本换行显示（word-wrap）

标签：style   color   使用   sp   问题   c   line   ef   r   

原文地址：http://www.cnblogs.com/lonelybonze/p/3984645.html