css文本两端对齐

1、利用text-align-last。但是ios兼容性不好

<template>
  <div class="bg-fff p-10">
        <p class="order-msg"> <span>订单号</span>：No1234567</p>
        <p class="order-msg"> <span>创建时间</span>：2019-09-09</p>
        <p class="order-msg"> <span>订单金额</span>：60元</p>
  </div>
</template>
<style scoped  lang="less">
 .order-msg{
   span{
     width:120px;
     display: inline-block;//重要
     text-align:justify;
     text-align-last: justify;//重要
   }
 }
</style>

效果如下：

2、利用after伪类

     <div class="bg-fff p-10">
        <p class="order-msg"><span class="label">订单号</span><span class="value c-666">：</span>No1234567</p>
        <p class="order-msg"><span class="label">创建时间</span><span class="value c-666">：</span>2019-09-09</p>
        <p class="order-msg"><span class="label">订单金额</span><span class="value c-666">：</span>60元</p>
      </div>

<style scoped  lang="less">
 .order-msg{
   color:#333;
   font-size:16PX;
   height:30PX; // 非常重要！一定要写
   line-height:30PX; //非常重要！一定要写
   .label{
     display: inline-block;
     width:75PX;
     text-align:justify;
     color:#666;
     vertical-align: top; //非常重要！一定要写
     height:100%;
     &::after {
      display: inline-block;
	 	  width: 100%;
	 	  content: "";
	 	  height: 0;
    }
   }
   .value {
      padding-right: 10px;
    }
 }
</style>