css设置文本两端对齐

一. 设置text-align: justify，此属性对最后一行文字无效

<div class="father-box">
  <div class="child-box">
    测试text-align：justify;是否能使文字两端对齐
  </div>
</div>
<style lang="scss" scoped>
.father-box {
  width: 500px;
  height: 200px;
  background: cadetblue;
  .child-box {
    text-align: justify;
  }
}
</style>

二. 两种解决text-align: justify 对最后一行文字无效方案

1. 添加一行内容为空的伪元素

期望效果：

代码示例：

<style lang="scss" scoped>
.father-box {
  width: 500px;
  height: 200px;
  background: cadetblue;
  .child-box {
    text-align: justify;
    &:after {
      content: '';
      display: inline-block;
      width: 100%;
    }
  }
}
</style>

2. 设置text-align-last: justify，此方法存在浏览器兼容性问题

<style lang="scss" scoped>
.father-box {
  width: 500px;
  height: 200px;
  background: cadetblue;
  .child-box {
    text-align: justify;
    text-align-last: justify;
  }
}
</style>