css实现文字两端对齐

先看下效果图：

css实现方法：

方法1：实现文字两端对齐，我这里借助了一个行内空标签<i>，这里使用<span>标签也可实现。

<span class="form-item-title">部门<i></i></span>

.form-item-title{
  flex: 0 0 120px;
  margin-right: 30px;
  font-size: 28px;
  color: #494949;
  text-align: justify; // 实现文字两端对齐
  line-height: 32px;
  padding-top: 36px;
  box-sizing: border-box;
  i{
     content: "";
     display: inline-block;
     width: 100%;
     // padding-left: 100%; // 与width: 100%效果相同
   }
}

方法2：使用after伪元素实现。

<span class="form-item-title">部门</span>

.form-item-title{
  flex: 0 0 120px;
  margin-right: 30px;
  font-size: 28px;
  color: #494949;
  text-align: justify; // 实现文字两端对齐
  line-height: 32px;
  padding-top: 36px;
  box-sizing: border-box;
  &:after{
     content: "";
     display: inline-block;
     width: 100%;
     // padding-left: 100%; // 与width: 100%效果相同
   }
}