一、背景
请求后端接口,返回的数据中带有换行符 \n
, 直接渲染到el-table
中后,期望带有换行功能,然而显示的效果并没换行。
打开F12进行源码检查,DOM -> Table Cell
的innerText
数据中的换行符 \n
丢失。
二、解决办法
1.代码
.el-table {
.cell {
white-space: pre-line !important;
}
}
2.解读
根据MDN的解读:
white-space
: 属性被指定为从下面的值列表中选择的单个关键字:normal
: 连续的空白符会被合并,换行符会被当作空白符来处理。换行在填充「行框盒子 (line boxes)」时是必要。nowrap
: 和normal
一样,连续的空白符会被合并。但文本内的换行无效。pre-wrap
: 连续的空白符会被保留。在遇到换行符或者
元素,或者需要为了填充「行框盒子 (line boxes)」时才会换行。pre-line
: 连续的空白符会被合并。在遇到换行符或者
元素,或者需要为了填充「行框盒子 (line boxes)」时会换行。break-spaces
: 与pre-wrap
的行为相同,除了:- 任何保留的空白序列总是占用空间,包括在行尾。
- 每个保留的空格字符后都存在换行机会,包括空格字符之间。
- 这样保留的空间占用空间而不会挂起,从而影响盒子的固有尺寸(最小内容大小和最大内容大小)。
总结
各种 white-space 各种值的行为总结: