vue3解决el-descriptions的label被挤压换行以及内容过长时换行问题

问题描述：在实际开发中，经常会使用Descriptions描述列表来展示内容，而有时某个字段内容太多，就会导致如下图的问题，因此本文就主要介绍如何解决该问题。

 

 解决方案代码：

<el-descriptions-item
   class-name="my-class" // 给内容添加类名
   label="备注"
   label-class-name="my-label" // 给label添加类名
>
   {{ remark }}
</el-descriptions-item>

:deep() {
  .el-descriptions-item__content {
    max-width: 295px;  // 如果下方最大宽度不起效果，就加上此样式
  }
}
.my-label {
  width: 200px;
  color: #999;
  font-weight: normal;
  background: #fff;
}
.my-class {
  max-width: 295px; // 给内容增加最大宽度
  word-break: break-all; // 让内容超出列宽时自动换行显示
  word-wrap: break-word;
}

解决label被挤压换行问题的主要点是： 给内容列一个最大宽度；

而解决内容过多换行问题的主要点就是：给内容列添加 word-break: break-all; word-wrap: break-word;代码

最后效果如图所示：