前端基础学习-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-

小夭。

11502人浏览 · 2021-02-05 16:20:10

小夭。 · 2021-02-05 16:20:10 发布

记录开发中遇到的一个小样式问题。先上效果图
在这里插入图片描述
这里主要是对样式进行更改

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;
}