小程序实现文字两端对齐

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

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读