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

最新推荐文章于 2025-07-27 04:16:49 发布

原创最新推荐文章于 2025-07-27 04:16:49 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

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

26 篇文章

订阅专栏

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

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

<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%;
        }
}