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;代码
最后效果如图所示:
更多推荐
已为社区贡献4条内容
所有评论(0)