CSS 单行 文字两端对齐 方法！

 要实现的最终效果：

 

 

方法1：

       div代码

<div class="strong_center">商品合计</div>

      css代码

.strong_center{
  text-align: justify;
  width: 120px;
  font-weight: bold;
  height: 30px;
  overflow: hidden;
}
.strong_center:after {
    content: " ";
    display: inline-block;
    width: 100%;
}

 

方法2：

      div代码

<div class="strong_center">商品合计<i></i></div>

     css代码

.strong_center{
  text-align: justify;
  width: 120px;
  font-weight: bold;
  height: 30px;
  overflow: hidden;
}
.strong_center i {
    content: " ";
    display: inline-block;
    width: 100%;
}

 以上两个方法原理一样！