CSS 使用white-space属性换行

一、white-space属性的常见值

* 原本格式：

1、white-space:normal

      默认值，空格和换行符会被忽略过滤掉；宽度不够时文本会自动换行

     * 宽度足够时，normal 处理后的格式

     

     * 宽度不够时， normal 处理后的格式

 

2、white-space:nowrap

        空格和换行符会被忽略过滤掉；宽度不够时不会自动换行

        不会因为容器的大小自动换行，除非遇到<br>换行符

        * 宽度足够时，nowrap 处理后的格式

        

        * 宽度不够时，nowrap 处理后的格式

        

3、white-space:pre

        同<pre>标签，空格和换行符会被保留显示，就算宽度不够时，格式也会按照原格式原样显示

        * 宽度足够时，pre 处理后的格式

        

        * 宽度不够时，pre 处理后的格式

         

4、white-space:pre-wrap

        空格和换行符会被保留显示，当内容超出容器时自动换行

         * 宽度足够时，pre 处理后的格式

        

         * 宽度不够时，pre 处理后的格式

                

5、white-space:pre-line

        保留显示换行符，多个连续的空格会被合并为一个空格显示；

        适用于显示换行符，但是不想显示过多冗余的空格的场景;

        注意：行首的空格并未显示

           * 宽度足够时，pre-line处理后的格式

        

        * 宽度足够时，pre-line处理后的格式

        

6、white-space:break-spaces

二、小结

1、white-space:normal和white-space:nowrap

        空格和换行符会被忽略过滤掉；宽度不够时，前者文本会自动换行，后者不会自动换行

2、white-space:pre和white-space:pre-wrap

        空格和换行符会被保留显示，宽度不够时，前者文本不会自动换行，后者会自动换行

3、pre-line相比pre-wrap，后者不会合并多余的空格，使用时按照需求使用即可。