小程序 | video标签中文字重叠问题

项目场景：

微信小程序中使用 video 组件，并且在video标签 中添加了几段文字，具体代码如下：

index.wxml

<video>
  <view class="interaction" style="bottom:{{itbottom}};">
    <view class="videoInfo">
      <view>别太委屈，不懂得珍惜你的人不会看见，不喜欢你的人只会觉得厌烦。</view>
      <view>人生，纠结也是过，轻松也是过，何必和自己过不去。</view>
      <view> 当断则断，才能有舍必有得。</view>
    </view>
  </view>
</video>

这里是在<view> 中添加文字，使用 <label> 和 <text> 效果一样。
index.wxss

page{
  height: 100%;
}
.interaction{
  height: 30%;
  width: 98%;
  background-color: blanchedalmond;
  position: absolute;
  left: 1%;
  bottom: 30rpx;
}
.videoInfo{
  width: 80%;
  background-color: gold;
}

---

问题描述：

在<view class="videoInfo"> 下的所有文字都重叠在了一起：

---

原因分析：

使用调试工具定位 <view> 的文字，所有的 文字的 高度都为 0

因为，在 <view class="videoInfo"> 没有给它分配 height 属性，所有的文本的高度都为 0，造成所有的文本都挤在了一起。

解决方案：

在 videoInfo 样式中，添加 line-height 属性：

.videoInfo{
  width: 80%;
  line-height: 30rpx;
  background-color: gold;
}

这样 <view class="videoInfo">的高度就被文字撑开了。