小程序实现文字两端对齐

我们知道，text-align: justify;对最后一行无效，当有一个段落而最后一行只有两个字时，text-align: justify;的效果是前面N行两端对齐，最后一行居左，这样有利于用户的视觉体验，但是当我们只有一行文本，该怎么实现单行文本两端对齐呢？效果如下：

 

 

方法一，利用伪类after新增一行，使该行文本不是最后一行

wxss:

.ul .li label:after {
    display: inline-block;
    width: 100%;
    content: '';
    height: 0;
}

方法二，利用新属性text-align-last: justify;实现最后一行的文本对齐，小程序兼容

wxss:

.ul .li label{
  display: inline-block;
  width: 20%;
  text-align: justify;
  text-align-last: justify;
}

wxml:

<view class="ul">
    <view class="li flex">
      <label>姓名</label>：
      <view class="li-input">
        <input auto-focus placeholder="请输入姓名" />
      </view>
    </view>
</view>

text-align-last 属性规定如何对齐文本的最后一行。
注意：text-align-last 属性只有在 text-align 属性设置为 "justify" 时才起作用。

浏览器支持：

 

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe