前端基础学习-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穿透一下