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

  • 相关阅读:
    AndroidStudio gradle配置
    Git中pull对比fetch和merge
    Knockout.js随手记(7)
    Knockout.js随手记(6)
    MVC自动绑定整数数组
    Knockout.js随手记(5)
    ASP.NET4.5Web API及非同步程序开发系列(3)
    Knockout.js随手记(4)
    ASP.NET4.5Web API及非同步程序开发系列(2)
    ASP.NET4.5Web API及非同步程序开发系列(1)
  • 原文地址:https://www.cnblogs.com/lonelybonze/p/3984645.html
Copyright © 2020-2023  润新知