element table 组件内容换行方案

最新推荐文章于 2024-07-31 18:17:45 发布

stu_yiliang

最新推荐文章于 2024-07-31 18:17:45 发布

阅读量7.5w

点赞数 13

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/greekmrzzj/article/details/79476752

版权

在接手使用Element UI的前端项目时，遇到表格中idCardNo字段内容显示不清晰的问题。原有的内容无法自动换行，影响用户体验。解决方案包括尝试使用CSS属性`word-wrap: break-word;`，虽然在多数浏览器中有效，但在Firefox中失效。最终通过设置`white-space: pre-wrap;`解决了问题，此属性允许保留空白符序列并正常换行，确保内容在各浏览器中都能正确显示。

摘要由CSDN通过智能技术生成

element table 组件内容换行方案

背景

临时接手了一个element UI的前端项目，吐槽一下后台接口，这个idCardNo字段。
这里写图片描述

项目直接使用了el-table组件：

    <el-table
      :data="warnings"
      :row-class-name="highlightRow"
      v-loading="isLoading">
      <el-table-column
        label="ID"
        prop="id"/>
      <