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

先上效果图

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

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% /* 换行 */

}

+10086 666

手动点赞