css文字属性：white-space、word-break、word-wrap详解以及单行/多行文本溢出显示省略号

white-space属性

官方文档

大白话

值	描述
normal	默认，多个空格和多个换行只会渲染出一个空格
pre	空白和换行（\n）会被浏览器保留，每个空格和换行都会被渲染出来，但是超出了宽度时，没有\n不会自动换行
nowrap	文本不会换行，如果需要设置超出一行显示省略号则需要设置为nowrap
pre-wrap	每个换行都会被渲染，并且每个空格都会被渲染出来，超出宽度会自动换行。常用
pre-line	每个换行都会被渲染，但多个空格只会渲染出一个空格，超出宽度会自动换行。常用
inherit	从父级继承，white-space属性默认会继承自父级的，几乎用不到这个属性

word-break

官方文档

大白话

值	描述
normal	默认，中文可以正常换行；英文会整个单词换行，如果超长单词（或数字）不会截断，这会导致撑出容器
break-all	中文可以正常换行；遇到英文（或数字）会截断单词（或数字）进行换行（一点缝隙都不留）。常用
keep-all	不允许中文或英文文字断行，把前后标点符号内的汉字短语整个换行。这个属性还不如normal，一般用不到

word-wrap

官方文档

大白话

值	描述
normal	默认，中文可以正常换行；英文会整个单词换行，如果超长单词（或数字）不会截断，这会导致撑出容器
break-word	支持长字母和长数字的换行，不会截断单词（可能会有一段留白）

对比：word-break: break-all; 和 word-wrap: break-word; 的区别

现在使用word-break: break-word;不会截断单词

1. word-break: break-all;比较霸道，会强行截断单词，一点缝隙不留；word-wrap: break-word;相对温和，不会截断单词。word-wrap: break-word;不会截断单词会带来一个小问题，就是可能页面上会有一片一片的留白，对于这个问题，可以使用text-align: justify;进行优化
2. word-break: break-all;对于长串的标点符号，如：，，，，，，，，，，，，，，，，，，，，无法截断，会超出容器；word-wrap: break-word;则会将这种标点符号截断换行展示。对于word-break: break-all;的这个小问题，可以使用line-break: anywhere;进行解决

总结：

1. 如果希望识别出换行符，使用white-space: pre-line;或white-space: pre-wrap;

   如果希望识别每个空格，使用white-space: pre-wrap;

   如果希望多个空格识别成一个空格，使用white-space: pre-line;

2. 如果希望长字母（长数字）可以换行，使用word-break: break-all;或word-wrap: break-word;

   如果不在乎单词被截断，使用word-break: break-all;

   如果希望长单词可以换行并且不希望字母被截断，使用word-wrap: break-word;

3. 如果希望长串的标点符号可以换行，使用word-wrap: break-word;或line-break: anywhere;

   line-break: anywhere;会截断单词

   word-wrap: break-word;不会截断单词

4. 文字属性一般都可以继承自父级，以上出现的文字属性都可以继承，在一些特定的页面，可以给最大的父级提前设置好下面的[组合使用]

组合使用：识别换行符、多个空格符，字母数字自动换行，标点符号自动换行，两端对齐

    white-space: pre-wrap; // 识别换行符，相对于 white-space: pre-line; 可以识别多个空格符
    word-wrap: break-word; // 相比于 word-break: break-all; 不会截断单词，并且 word-break: break-all; 无法截断长串的标点符号
    text-align: justify; // 优化 word-wrap: break-word; 带来的留白

单行文本超出一行显示省略号

    width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

超出2行显示省略号

    width: 200px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    text-align: justify;