小程序前端view内容重叠问题

view重叠

在项目中遇到一个小bug,如一行字数太长则 会与下面一行重叠显示, 如下图
问题重现

然后开始了调试之路
wxml 代码如下:

 <view class="text">
      <text>合同用人单位名称</text>
</view>

wxss 代码如下:

.text{
    font-size: 28rpx;
    width: 50%;
    height: 40rpx;
    justify-content: center; /**内容居中*/
    vertical-align: center; /**垂直居中*/
    text-align: justify;
    height: 100%;
}

上面 就 height:100% 是重点.