【已解决】vue3 element-plus el-descriptions 挤压不换行显示不全问题

最新推荐文章于 2025-03-19 14:53:20 发布

超可爱的奶茶

最新推荐文章于 2025-03-19 14:53:20 发布

阅读量3.2k

点赞数 6

分类专栏： vue3 element-plus 文章标签： vue elementui

本文链接：https://blog.csdn.net/weixin_43923958/article/details/131455839

版权

vue3 同时被 2 个专栏收录

1 篇文章

订阅专栏

element-plus

1 篇文章

订阅专栏

当使用el-descriptions组件时遇到数据过长导致的内容挤压问题，可以采用CSS解决方案。通过设置`:deep`选择器，调整`.el-descriptions__table`的`min-width`,`max-width`,`word-break`和`word-wrap`属性，确保内容在指定范围内换行显示，避免挤压整体布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

使用el-descriptions时，当某个数据过长造成整体的内容挤压
在这里插入图片描述

解决方案：

设置css

在这里插入图片描述
根据浏览器获取的css deep 修改对应的样式

:deep(.el-descriptions__body) {
  .el-descriptions__table.is-bordered .el-descriptions__cell {
    padding: 30px 11px;
    min-width: 120px;
    max-width: 500px;
    word-break: break-all; // 让内容超出列宽时自动换行显示
    word-wrap: break-word;
  }
}

调整完↓
在这里插入图片描述