[wechat][css]文字两端对齐的替代方法

最新推荐文章于 2024-09-06 22:33:47 发布

原创最新推荐文章于 2024-09-06 22:33:47 发布 · 342 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #小程序

WeChat 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种在微信小程序中解决不支持特定语法的问题，通过CSS和伪类的配合，实现了预期的显示效果，特别关注了宽度和相对定位的应用。

写在前面,由于微信小程序不支持的语法,就是把decode='true’打开,会导致微信开发者工具报错卡死,所以才有了下面的css和伪类的配合使用

使用的方案

// 最好配合宽度使用
.c-label2{
   margin-right:unit(32,rpx);
    display: inline-block;
    width:unit(129,rpx);
    text-align:justify;
    text-align-last: justify;
    position: relative;
    &:after{
      position: absolute;
      content:':';
      display: inline-block;
      top:0;
      right:unit(-10,rpx);
    }
  }

最终的效果显示如下图
在这里插入图片描述