el-form-item中表单项label和表单项内容换行实现方法
作者：Hyanl
这篇文章主要给大家介绍了el-form-item中表单项label和表单项内容换行实现的相关资料,每个表单el-form由多个表单域el-form-item组成,需要的朋友可以参考下
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中需要换行的地方加上‘\n’
2、css
/* 过于长的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表单项内容换行内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！