element-ui使用el-table,保留字段前的空白

|-----------|-------------------------|
| 项目名称 | 项目编号 |
| 1、XXXXX | 1111111111111111111 |
| 1.1 XXXXX | 11111111111111222222222 |

如上表格中,实现项目名称字段1.1前空白的效果。

从JAVA返回的数据带有空白,即数据库中插入的数据带有空白。

原先写法:

html 复制代码
<el-table>
    <el-table-column label='项目' prop='project'>
    </el-table-column>
</el-table>

修改以实现:

html 复制代码
<el-table>
    <el-table-column label='项目'>
        <template slot -scope="scope">
            <div style="white-space: pre-wrap">{
  
  {scope.row.project}}</div>
        </template>
    </el-table-column>
</el-table>

在CSS中,white-space 属性用于控制如何处理元素内的空白字符。这包括空格、制表符、换行符等。white-space属性的设置会影响元素内容的显示方式,特别是在文本换行和空白字符的处理上。

white-space属性可以设置为以下几个值:

  • normal:这是默认值。连续的空白符会被合并,换行符会被视为普通的空白符来处理。文本会在必要时自动换行。

  • nowrap :与normal 相似,连续的空白符会被合并,但是会阻止文本自动换行。只有在遇到*<br>*标签时文本才会换行。

  • pre :连续的空白符会被保留,文本只会在遇到换行符或*<br>*元素时换行。

  • pre-wrap :连续的空白符会被保留,文本会在遇到换行符、*<br>*元素或必要时自动换行。

  • pre-line :连续的空白符会被合并,但是会保留换行符。文本会在遇到换行符、*<br>*元素或必要时自动换行。

  • break-spaces :与pre-wrap相似,但是会保留行末的空白符,并且允许在任何保留的空白字符后换行。

相关推荐
codingandsleeping3 分钟前
浏览器的缓存机制
前端·后端
-代号952736 分钟前
【JavaScript】十二、定时器
开发语言·javascript·ecmascript
灵感__idea2 小时前
JavaScript高级程序设计(第5版):扎实的基本功是唯一捷径
前端·javascript·程序员
摇滚侠2 小时前
Vue3 其它API toRow和markRow
前端·javascript
難釋懷2 小时前
JavaScript基础-history 对象
开发语言·前端·javascript
beibeibeiooo2 小时前
【CSS3】04-标准流 + 浮动 + flex布局
前端·html·css3
拉不动的猪2 小时前
刷刷题47(react常规面试题2)
前端·javascript·面试
浪遏2 小时前
场景题:大文件上传 ?| 过总字节一面😱
前端·javascript·面试
计算机毕设定制辅导-无忧学长2 小时前
HTML 与 JavaScript 交互:学习进程中的新跨越(一)
javascript·html·交互
Bigger2 小时前
Tauri(十八)——如何开发 Tauri 插件
前端·rust·app