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

问题描述

使用el-descriptions时,当某个数据过长造成整体的内容挤压
【已解决】vue3 element-plus el-descriptions 挤压不换行显示不全问题_第1张图片

解决方案:

设置css

【已解决】vue3 element-plus el-descriptions 挤压不换行显示不全问题_第2张图片
根据浏览器获取的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;
  }
}

调整完↓
【已解决】vue3 element-plus el-descriptions 挤压不换行显示不全问题_第3张图片

你可能感兴趣的:(vue3,element-plus,vue,elementui)