首页 > 代码库 > 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)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。