小程序实现文字两端对齐

我们知道,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" 时才起作用。

浏览器支持:

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

你可能感兴趣的:(小程序实现文字两端对齐)