美文网首页
关于word-break和word-wrap的总结

关于word-break和word-wrap的总结

作者: cb12hx | 来源:发表于2017-07-19 18:15 被阅读0次

    两者皆可实现断词的效果,看定义我是懵逼的,没办法,只能直接上demo

    image.png

    样式定义如下

    .test {
        width: 300px;
        height: 500px;
        margin: 50px;
        background: green;
        float: left;
      }
      .wordBreak {
        word-break: break-all;
      }
      .wordWrap {
        word-wrap: break-word;
      }
    

    比较之后可以发现,如果不采用断词,会超出dom,这显然不是我们要的效果,word-wrap:break-word会单独起一行,如果单词一行显示不全,则新起一行,但是word-break:break-all,则很暴力,完全不浪费一点空间,只要到达了dom边界,直接断词,另外word-break还有一个属性break-word,这和word-wrap:break-word效果一致

    相关文章

      网友评论

          本文标题:关于word-break和word-wrap的总结

          本文链接:https://www.haomeiwen.com/subject/sxfrkxtx.html