Element UI form 表单 label 两端对齐（添加空格）

关于 Element ui form 的 label 对齐，组件是提供了三种方式的：左对齐、右对齐和顶部对齐。

但我要的是文字两端对齐。一开始是尝试标签里放  ，但是没有显示空格，而是直接显示的文本。后来换成 slot 形式。

<span slot="label" v-html="标&emsp;&emsp;签:" />

这样就可以显示空格了。但是，上面加了空格的标签和实际的四字标签：“四字标签:”并不对齐。可能是系统原因，也可能是浏览器原因，还有可能是字体原因。总之，  并不是严格等于一个汉字宽度，  也不是半个汉字宽度。

接下来我又尝试了 text-align 这个 css 属性。我记得这个属性设置为 justify 是可以两端对齐的。但实际上无法解决我的问题。因为 justify 这个属性值是作用于非最后一行文字的（有道理，每段最后一行是不需要两端对齐的）。mdn 文档上还提到 justify-all 可以强制最后一行对齐。但这个特性很多浏览器没有实现。

没办法，我只能写了一个函数，插入真实但隐藏的字符来实现两端对齐。

/**
 * 生成两端对齐的 label，仅限 2-4 个字的。
 * 因为 form label 无法使用空格，需要使用 slot；
 * slot 里的 $emsp; 宽度与汉字不一样，无法对其。
 * 所以使用透明标签代替
 * @param {string} text
 */
export function generateLabel(text) {
  const len = text.length
  let str = text
  if (len === 2) {
    str = `${text[0]}<span class="opacity-0">空格</span>${text[1]}`
  } else if (len === 3) {
    str = `${text[0]}<span class="opacity-0">a</span>${text[1]}<span class="opacity-0">a</span>${text[2]}`
  }
  str += ':'
  return str
}

这个方法局限性很大。但也是无奈之举。

---

网上对于 justify 有一个补救方法：用 ::after 伪元素充当最后一行。这个方法我试了，也有点问题。首先，我的标签是包含“:”的，justify 使得文字远离了冒号。其次，标签高度会变成两倍。即使 height 和 line-height 设为 0 也没用。