使用CSS将文字两端对齐

需求：

在表单填写或者姓名列表展示时，会出现文字字数不统一，导致文字长度不一的情况，但是又想要文字两端对齐的情况。

思路：

1. 对于静态数据，可以使用空格分开，但是在 html 中最多显示一个空格，即使打了 n 多空格符，所以可以使用   将文字分开。
2. 但是对于动态填充的数据就无法使用方法1，可以使用CSS2中 text-align: justify; 实现，但是只是用该属性无法达到目的。

方法2无法实现的原因是该属性针对多行文本

代码1：

div:after {
    content: " ";
    display: inline-block;
    width: 100%;
}

使用该代码，意在通过伪元素撑开 div，造成多行文本假象，实现 text-align: justify; 属性效果。
但是这种方法会撑高 div，这时需要给 div 定义高度，因为伪元素并没有设置高度，所以不影响。

代码2：

上诉方法虽然也能实现，但是毕竟使页面多了一个伪元素。

div {
  width: 100px;
  border: 1px solid red;
  text-align: justify;
  text-align-last: justify;
  text-justify: distribute;
}

还可以使用text-align-last: justify;
justify
最后一行文字的开头语内容盒子的左侧对齐，末尾与右侧对齐。