收藏
回答

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

问题模块
API和组件

先上效果图


原理很简单,就是在原文本结尾补个会换行的空标签,模拟成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%  /* 换行 */

}



最后一次编辑于  2017-08-23  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

2 个回答