问题描述:在实际开发中,经常会使用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;代码

最后效果如图所示:

 

 

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐