前情提要
最近一直在捣腾antdv组件库，当用到table组件时，产品需要改变表头，多展示点内容且有换行，如这样的：
这有何难，改写下columns中的title属性就可以的吧。。。参考集美们的各种操作，插槽，直改html拼接等均以失败告终。
如此简单的一个换行字符串展示，竟然想难道我这么优秀的程序狗/傲娇/
如何解决
找到包含dom标签，设置css white-space: pre; 这样就解决的了。后端返回的column.title是一个包含\n的字符串，正常显示，\n会被解析成一个空格，达不到换行的展示要求，上white-space。
white-space: 用来设置如何处理元素中的空白。 他有6个属性值：
- normal：换行符会被当作空白符来处理，连续的空白符会被合并；在行框元素需要时会换行。
- nowrap: 和normal一样，连续的空白符会被合并；但文本不会换行。
- pre-line: 连续的空白符会被合并。在遇到换行符或者
元素或在行框元素需要时会换行。 - pre: 连续的空白符会被保留，在遇到换行符或者
元素时才会换行。（感觉表现<pre>标签） - pre-wrap: 连续的空白符会被保留，在遇到换行符或者
元素或在行框元素需要时会换行。 - break-space: (与 pre-wrap的行为相同)，除了：
- 任何保留的空白序列总是占用空间，包括在行尾。
- 每个保留的空格字符后都存在换行机会，包括空格字符之间。
- 这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）。
总结:
| 换行符 | 空格和制表符 | 文字换行 | 行尾空格 | |
|---|---|---|---|---|
| normal | 合并 | 合并 | 换行 | 删除 |
| nowrap | 合并 | 合并 | 不换行 | 删除 |
| pre | 保留 | 保留 | 不换行 | 保留 |
| pre-wrap | 保留 | 保留 | 换行 | 挂起 |
| pre-line | 保留 | 合并 | 换行 | 删除 |
| break-spaces | 保留 | 保留 | 换行 | 换行 |
Q1：什么是内联盒子（inline boxes）
A：内联盒子就是高度由内容撑开，正常流展示不换行即display: inline;
Q2 ：什么是行框盒子(line boxes)
A：行框盒子就是包裹住一行内容的一个虚拟的矩形框，由一个个内联盒子组成，其高度等于本行内所有内联盒子高度的最大值。
Q3: 什么是块级盒子（block boxes）
A: 正常流展示换行即display: block; 高度由一个一个行框盒子堆起来的。
写在最后，知识真是美腻。
文中若有不对，请指正，若有帮助，记得点赞哟～
