css中,word-wrap和word-break的区别是什么?

我在http://www.w3school.com.cn/cs...http://www.w3school.com.cn/cs... 上看到如下解释

word-wrap 属性允许长单词或 URL 地址换行到下一行。
word-break 属性规定自动换行的处理方法。

但是我看到
word-wrap:break-word
word-break:break-all
中实现的效果是一样的,他们的区别在哪里?在实际使用的我们应该怎么用这两个属性?

阅读 2.2k
评论
    2 个回答
    • 5.9k
    1. 每种语言都有各自的默认断字规则,也就是在哪个位置可以插入break-points(断点),当可能会换行显示时,会根据这些断点来决定从文字的哪个位置开始换行。
      比如汉字你好吗的断点你·好·吗,中间的点表示断点的位置;
      比如英文hello world的断点hello·world;

      那么,我们可能想要改变这些默认的断点规则,word-break属性就是做这个的,它会改变默认的断点规则。
      clipboard.png

      当设置word-break: break-all;的时候,上面的汉字断点规则没有改变,英文的断点除了默认的空白符和符号断点外,还会在任意两个字母之间添加断点,也就是说任意两个字母之间的位置也是可以断开的,此时英文hello world的断点就变为h·e·l·l·o·w·o·r·l·d;
      所以,word-break的本质是更改断点规则。

    2. word-wrap的设计目的是当文字可能会造成溢出的情况下所做的排版。

      This property specifies whether the UA may arbitrarily break within a word to prevent overflow when an otherwise-unbreakable string is too long to fit within the line box.

      word-wrap的取值break-word的解释如下:

      clipboard.png

      所以,当文字排版的时候,首先会按照word-break的断点规则进行排版,在根据断点排版完成之后,会根据word-wrap的取值查看是否需要在上次的排版结果上再排版
      word-break: break-word;表示在根据断点排版完成之后,如果存在行溢出的情况,可以在溢出点处断开文字,换行显示。

    3. 举例如下:

      <body>
          <div>
              sdf
              sfsdfsdjhgfhsjdgfhsdgfsdfjshdfsjdfjsdfhskjdfhskjdfh
              def
              jdhfjdhsfjdhsfjhfasdf
          </div>
      </body>
      div {
          width:100px;
          background:red;
          word-break: break-all;
          word-wrap: break-word;
      }

      当不设置word-breakword-wrap的时候,因为默认的英文断点就是空白符和标点符号,所以断点只存在于单词之间,显示结果1如下:

      clipboard.png

      当只设置word-break: break-all;的时候,此时断点的位置除了默认的断点位置之外,任意两个字母之间也存在断点,显示结果2如下:

      clipboard.png

      当只设置word-wrap: break-word;的时候,会在显示结果1的基础上在可能溢出的地方断行,由显示结果1可知有两处造成溢出的地方,显示结果3如下:

      clipboard.png

      当同时设置word-break: break-all;word-wrap: break-word;的时候,首先应用断点之后的效果如显示结果2所示,此时的显示结果没有可能造成溢出的地方,所以虽然设置了word-wrap: break-word;但是并没有可供它起作用的地方,显示结果如下,可见和显示结果2一样:

      clipboard.png

    4. 综上,word-break: break-all;word-wrap: break-word;的设计目的不一样,排版的本质也不一样,所以显示效果根据不同的情况可能会不一样。

      word-wrap:

      css的 word-wrap 属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。

      word-break:

      css的 word-break 属性用来标明怎么样进行单词内的断句。

        撰写回答

        登录后参与交流、获取后续更新提醒