SOURCE

<p>css white-space 这个css样式，用来设置 节点元素对内容空格的处理方式，<br />有几个可选值：normal,nowrap,pre,pre-wrap,pre-line。默认为normal。</p>
<p>这里指的空白字符，包括空格、制表符等空白字符</p>
<a href="https://blog.csdn.net/qq_33706382/article/details/78328188" target="_black">原文链接</a>

<div class="base normal">
    white-space 的 normal 属性表示合并空格，多个相邻空格合并成一个空格，在源码中的换行作为空格处理，只会根据容器的大小进行自动换行
</div>
<hr />
<div class="base nowrap">
    white-space 的 nowrap 属性他和 normal 一样，也合并空格，但是不会根据容器大小换行，表示不换行
</div>
<p> 在移动端布局中，经常使用省略号 </p>
<div class="base nowrap ellipsis">
    nowrap 和 overflow,text-overflow 省略号的实现
</div>
<hr>
<p>源码中的换行在显示中也换行了，源码中的多个空格也保留了，并且 pre 在没有碰到源码换行和 'br'标签的时候是不换行的，不会去自适应容器换行</p>
<div class="base pre">
       white-space 的 pre 属性     的作用是保持源码中的空格，有几个空格算几个空格显示，同时换行只认源码中的换行和 "br" 标签,<br />这里有br标签所以才回车了
</div>
<hr>
<p>pre-wrap 和 pre 的区别就是 pre-wrap 可以自适应容器的边界进行换行</p>
<div class="base pre-wrap">
    white-space 的 pre-wrap 属性   的作用是保留空格<br />，并且除了碰到源码中的换行和"br"标签之外，还会自适应容器的边界进行换行。
</div>
<hr />
<p>pre-line 和 pre-wrap 的区别是，pre-line 也会保留源码中的换行，但是不会保留源码中的空格</p>
<div class="base pre-line">
    white-space 的 pre-line 属性   的<br>作用是合并空格，换行和 pre-wrap 一样，遇到源码中的换行和 "br" 会换行，碰到容器的边界也会换行。
</div>
<hr />
<h2>总结：</h2>
<table>
<tbody>
<tr class="firstRow">
<td valign="top" width="133" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
white-space属性</td>
<td valign="top" width="90" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
源码空格</td>
<td valign="top" width="94" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
源码换行</td>
<td valign="top" colspan="1" rowspan="1" width="93" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
&lt;br&gt;换行</td>
<td valign="top" colspan="1" rowspan="1" width="508" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
容器边界换行</td>
</tr>
<tr>
<td valign="top" width="133" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
normal</td>
<td valign="top" width="90" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
合并</td>
<td valign="top" width="94" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
忽略</td>
<td valign="top" colspan="1" rowspan="1" width="93" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
换行</td>
<td valign="top" colspan="1" rowspan="1" width="508" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
换行</td>
</tr>
<tr>
<td valign="top" width="133" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
nowrap</td>
<td valign="top" width="90" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
合并</td>
<td valign="top" width="94" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
忽略</td>
<td valign="top" colspan="1" rowspan="1" width="93" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
换行</td>
<td valign="top" colspan="1" rowspan="1" width="508" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
不换行</td>
</tr>
<tr>
<td valign="top" width="133" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
pre</td>
<td valign="top" width="90" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
保留</td>
<td valign="top" width="94" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
换行</td>
<td valign="top" colspan="1" rowspan="1" width="93" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
换行</td>
<td valign="top" colspan="1" rowspan="1" width="508" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
不换行</td>
</tr>
<tr>
<td valign="top" width="133" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
pre-wrap</td>
<td valign="top" width="90" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
保留</td>
<td valign="top" width="94" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
换行</td>
<td valign="top" colspan="1" rowspan="1" width="93" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
换行</td>
<td valign="top" colspan="1" rowspan="1" width="508" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
换行</td>
</tr>
<tr>
<td valign="top" width="133" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
pre-line</td>
<td valign="top" width="90" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
合并</td>
<td valign="top" width="94" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
换行</td>
<td valign="top" colspan="1" rowspan="1" width="93" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
换行</td>
<td valign="top" colspan="1" rowspan="1" width="508" style="word-break:break-all; border-width:1px; border-style:solid; border-color:rgb(227,108,9)">
换行</td>
</tr>
</tbody>
</table>

.base {
    margin: 12px;
    padding: 12px;
    width: 300px;
    background: #eee;
    border: 1px solid #333;
    line-height: 32px;
    font-size: 15px;
    font-family: '微软雅黑';
    white-space: nowrap;
}

.nowrap {
    white-space: nowrap;
}

.normal {
    white-space: normal;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
}

.pre {
    white-space: pre;
}

.pre-wrap {
    white-space: pre-wrap;
}

.pre-line {
    white-space: pre-line;
}