elemnet ui的el-form-item的表单项label和表单项内容原本是默认在同一行显示的，将el-form-item中表单项label和表单项内容换行怎么实现呢？
效果如下：
法1：elemnetUI官方的方法label-position=“top”
法2：
思路：将el-form或者el-form-item中的label-width属性去掉或者设置为0，如果label长度超出一行需要设置以下样式属性：加上如下样式代码：
<style scoped> /deep/ .el-form-item__label{ text-align:left; float: none; word-break: break-word; } </style>
附：el-form的label过长换行+根据label长度自动撑开
先上效果图
1、在需要换行的label进行改写，以及绑定class
<el-form-item :label="'活动名称\n（换行）'" class="fold_label" prop="name"> <el-input v-model="filterForm.name"></el-input> </el-form-item>
/* 过于长的label分两行展示样式 */ .fold_label .el-form-item__label { white-space: pre-line; text-align-last: justify; text-align: justify; margin-top: -4px; line-height: 25px; text-justify: distribute-all-lines; } /* 其他label根据宽度自动撑开 */ .el-form-item__label { text-align-last: justify; text-align: justify; text-justify: distribute-all-lines; }
这里如果不起作用可以用deep穿透一下
总结
到此这篇关于el-form-item中表单项label和表单项内容换行实现的文章就介绍到这了,更多相关el-form-item表单项内容换行内容请搜索本网站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本网站！
您可能感兴趣的文章:
- 修改el-form-item中的label里面的字体边距或者大小问题
- 如何修改el-form-item 的label的字体颜色
- vue3 el-form-item如何自定义label标签内容
- vue如何修改el-form-item中的label样式修改问题
- el-form表单el-form-item label不换行问题及解决
