公告列表
公告列表
收藏
回答

简单利用 text-align: justify 实现单行文本两端对齐

先上效果图


原理很简单，就是在原文本结尾补个会换行的空标签，模拟成2行文本


wxml



<view class="foods">

   <view class="eat">
      <view>早上吃什么<text></text></view>: 洗衣粉
   </view>
   <view class="eat">
      <view>午餐呢<text></text></view>: 肥皂
   </view>
   <view class="eat">
      <view>最重要的晚餐<text></text></view>: 沐浴露
   </view>

</view>



wxss



.foods {

   padding: 0 20rpx;
   background-color: #fff
}
.eat {
   line-height: 100rpx
}
.eat + .eat {
   border-top: 1rpx solid #f5f5f5
}
.eat view {
   height: 100rpx;
   width: 240rpx;
   display: inline-block;
   text-align: justify;
   vertical-align: top
}
.eat view text {
   display: inline-block;
   height: 0;
   width: 100%  /* 换行 */

}



回答关注问题邀请回答
收藏

3 个回答

  • ZHOU
    ZHOU
    2020-03-04

    在ios真机上无效，用最笨的办法吧，把每一个字用<text>标签包起来，外面用flex布局，justify-content: space-between; 搞定

    2020-03-04
    有用
    回复
  • 晓港Plus⁺
    晓港Plus⁺
    2018-01-31

    +10086 666

    2018-01-31
    有用
    回复
  • 可乐
    可乐
    2017-08-23

    手动点赞

    2017-08-23
    有用
    回复
请 登录 后发表内容
相关文档