el-form的label换行省略号，并保持水平居中，文本右对齐

效果

分析说明

多行换上，显示省略号

display: block;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;

水平居中

通过套一个div，将该div设置为flex布局，并设置元素交叉轴对其方式为水平居中

完整代码

<template>
  <div class="hello">
    <div>
      <el-form class="demo-form-inline" label-width="75px" size="small">
        <ul>
          <li>
            <el-form-item>
              <template v-slot:label>
                <div class="customLabel">
                  <label> 审批人呀 </label>
                </div>
              </template>
              <el-input placeholder="审批人"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item>
              <template v-slot:label>
                <div class="customLabel">
                  <label> 审批人 </label>
                </div>
              </template>
              <el-input placeholder="审批人"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item>
              <template v-slot:label>
                <div class="customLabel">
                  <label> 审批 </label>
                </div>
              </template>
              <el-input placeholder="审批人"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item>
              <template v-slot:label>
                <div class="customLabel">
                  <label> 审批审批审批审批审批 </label>
                </div>
              </template>
              <el-input placeholder="审批人"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item>
              <template v-slot:label>
                <div class="customLabel">
                  <label> 审批审批审 </label>
                </div>
              </template>
              <el-input placeholder="审批人"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item>
              <template v-slot:label>
                <div class="customLabel">
                  <label> 审批审批审批审批审 </label>
                </div>
              </template>
              <el-input placeholder="审批人"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item>
              <template v-slot:label>
                <div class="customLabel">
                  <label> Configuration </label>
                </div>
              </template>
              <el-input placeholder="审批人"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item>
              <template v-slot:label>
                <div class="customLabel">
                  <label> Configuration Hello World</label>
                </div>
              </template>
              <el-input placeholder="审批人"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item>
              <template v-slot:label>
                <div class="customLabel">
                  <label>Hello World</label>
                </div>
              </template>
              <el-input placeholder="审批人"></el-input>
            </el-form-item>
          </li>
        </ul>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}
li {
  width: 25%;
  box-sizing: border-box;
  padding-right: 24px;
}
.customLabel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 33px;
}
.customLabel label {
  display: block;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.1;
  word-break: break-all;
  text-align: right;
  //white-space: pre-wrap;
  width: 100%;
}
</style>