解决text-align: justify；在微信小程序中不兼容

佛佛ง

于 2021-11-02 19:29:46 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS学习笔记文章标签：微信小程序小程序

本文链接：https://blog.youkuaiyun.com/LzzMandy/article/details/121107130

CSS学习笔记专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一种在WXML中通过添加空标签实现文字对齐的方法，适用于需要精确控制UI布局的场景。通过调整CSS样式，可以确保不同长度的文字都能均匀对齐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

百度了其他大佬的，在项目中试验了一下，核心是在文字后边加一个空标签

<view class="ka-left" >
      <view class="ka-name">{{monthlypay[m].month}}卡<text class="hid"></text></view>
      <view class="ka-jine"> ¥{{monthlypay[m].jine}} </view>
</view>

.ka-name{
        width: 100rpx;
        height: 100rpx;
        line-height: 100rpx;
        text-align: justify;
        text-align-last: justify;
        text-justify: inter-ideograph; /** 增加或减少词间的空格 **/
        .hid{
          display:inline-block; 
          width:100%;
        }
}