首页 > 代码库 > CSS学习笔记:文本换行显示(word-wrap)

CSS学习笔记:文本换行显示(word-wrap)

在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)