zoukankan      html  css  js  c++  java
  • wordwrap 与 wordbreak 属性的理解

    一、浏览器默认处理文本换行

    现在的浏览器对文本的换行处理还是比较合理的,当文字超过容器宽度时会自动换行,那么它是怎么自动换行的呢?即:当一行的末尾容纳不下下一个文字或单词时,就会自动换行,

    英文单词不会被截断,相当于一段默认的css:

    {
        word-wrap: normal; /*浏览器对文本默认的自动换行处理*/
    }

    如图:浏览器自动换行文本

      

     

    二、break-word属性值

    当然在网页排版中也会遇到一些特殊情况,例如:某个单词(某品牌的英文名称)够长,而容器宽度较小以至于容纳不下,那么单词就会溢出容器,你可能就会想到下面一段css代码:

    {
        word-wrap: break-word; /*对溢出容器的单词进行截断,截断后的部分自动换行*/
    }

    如图:  使用break-word属性值之前                                                                    使用break-word属性值之后

                         

    PS:我觉得这样处理并不合理,因为一个完整单词被拆分开了显示(就像汉字也不能拆分一样,特殊情况除外),

    除了用上一行代码进行处理,我们是否可以考虑让容器宽度变长来展示文字,这样是否更合理些呢?

    三、break-all属性值

    还有另外一个关于文本断行的css属性值break-all:

    {
        word-break: break-all; 
    }

    这个属性值不好解释,我们可以假设把整段文本看作一个单词,当这个单词(整段文本)超出容器宽度,则截断,截断后的部分自动换行,以此类推,如图:

    PS:浏览器对文本的自动换行处理已经够好了,使用该属性缺点同2,并不赞成使用。

    转载请注明出处【作者:华子yjh原文链接

  • 相关阅读:
    音频算法之我思
    图像去模糊算法 循序渐进 附完整代码
    音频算法之小黄人变声 附完整C代码
    RocketMQ(2)---核心概念、特性、使用等
    RocketMQ(1)---架构原理及环境搭建
    RabbitMQ(2)---高级使用
    面试问题---JAVA程序CPU占用过高怎么定位
    RabbitMQ(1)---基本概念及简单demo
    JUC(4)---java线程池原理及源码分析
    JUC(3)---CountDownLatch、CyclicBarrier和AQS
  • 原文地址:https://www.cnblogs.com/yangjunhua/p/2892130.html
Copyright © 2011-2022 走看看