white-spacing,word-break,word-wrap的区别

最新推荐文章于 2024-09-06 22:33:47 发布

zzxboy1

最新推荐文章于 2024-09-06 22:33:47 发布

阅读量893

点赞数

分类专栏： CSS 文章标签：前端 CSS

本文链接：https://blog.youkuaiyun.com/zzxboy1/article/details/52089682

版权

CSS 专栏收录该内容

4 篇文章

订阅专栏

　　今天工作中遇到了需要让汉字和英文词汇均不换行的需求，同时需要考虑兼容性问题，除了white-space：nowrap或者pre。顺带将所有相关的知识补了一下。

首先是white-space，在没有设定white-space情况下

    #test {
        font-size: 20px;
        margin: 0 auto;
        background: grey;
        width: 100px;
        color: black;
    }
    </style>
</head>

  <body>
      <div id="test">dsafdsf 

      adsfsadfdafadf </div>
  </body>

</html>

结果图为：
这里写图片描述

接着是nowrap

    #test {
        font-size: 20px;
        margin: 0 auto;
        background: grey;
        width: 100px;
        color: black;
        white-space: nowrap;
    }
    </style>
</head>

  <body>
      <div id="test">dsafdsf 

      adsfsadfdafadf </div>
  </body>

</html>

结果图为
这里写图片描述

再就是pre

   <style type="text/css">
    #test {
        font-size: 20px;
        margin: 0 auto;
        background: grey;
        width: 100px;
        color: black;
        white-space: pre;
    }
    </style>
</head>

  <body>
      <div id="test">dsafdsf 

      adsfsadfdafadf </div>
  </body>

</html>

显然，默认的white-space会自动换行，而nowrap和pre不会换行，且pre还保留了空格符和换行符或者简单来说，保留了标签内的文本形式。

CSS2.1又新增了pre-wrap和line-wrap。

为了更好的对比pre和这两个新增属性的区别，对div内容进行了些许修改（多拆出了一个单词使内容可以自然换行）;
代码为

    #test {
        font-size: 20px;
        margin: 0 auto;
        background: grey;
        width: 100px;
        color: black;
        white-space:pre-wrap;
        /*white-space:pre-line;*/

    }
    </style>
</head>

  <body>
      <div id="test">dsafdsf 
      adsfsadf  dafadf </div>
  </body>

结果图分别为

pre
这里写图片描述

pre-wrap

这里写图片描述

pre-line
这里写图片描述

显然pre-line和pre-wrap都在pre的基础上增加了换行功能，但是pre-wrap对空格符和换行符都进行了识别而pre-line与pre不同之处还有就是它只识别了换行符。

这些CSS属性的兼容性如下图
这里写图片描述

显然IE7以下是不支持pre-line和pre-wrap的，但利用word-wrap，可以配合pre在IE7以下模拟pre-wrap。接下来将介绍word-wrap以及有相似作用的word-break;

 #test {
        font-size: 20px;
        margin: 0 auto;
        background: grey;
        width: 100px;
        color: black;
        /*
          word-wrap:break-word；
          word-break:keep-all;
          word-break:break-all;  
        */
    }
    </style>
</head>

  <body>
      <div id="test">dsafdsadfaffad
      adsfsadf  dafadf </div>
  </body>

normal和 word-wrap:break-word；word-break:break-all; 下结果分别为

normal（默认）
这里写图片描述

word-wrap:break-word
这里写图片描述

word-break:break-all
这里写图片描述

默认情况下是一个单词结束才换行，当添加了word-break:break-all和word-wrap:break-word后，一个单词结束之前就会发生换行，此外，word-wrap是优先选择一个新行，尝试能否完整放下一个单词，而word-break更简单粗暴，直接断开一个单词。
所以前面提到 ie7及以下无法使用white-space:pre-wrap，就可以结合white-space:pre加上word-wrap:break-word;来实现。
还有一个word-break:keep-all，是规定遇到半角空格和连字符才允许发生换行，这个在英语输入上除了额外加入了连字符，其余基本和normal一致。
但它在汉字处理上有奇效。

normal下，汉字是会自动换行的，
这里写图片描述