text 两端对齐 小程序_小程序实现文字两端对齐

我们知道，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:

姓名：

text-align-last 属性规定如何对齐文本的最后一行。

注意：text-align-last 属性只有在 text-align 属性设置为 "justify" 时才起作用。

浏览器支持：