微信小程序text文本溢出省略在某种状态下隐藏失败的小问题

先来贴一下网上随便就可以搜到的两个方案：
单行：

text{
    display: block;
    font-size:28rpx;
    color:#000000;
    line-height: 40rpx;
    height: 120rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}

多行：

text{
    display: -webkit-box;
    font-size:28rpx;
    color:#000000;
    line-height: 40rpx;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:3;
    overflow: hidden;
    text-overflow:ellipsis;
}

简洁明了，So easy！
效果大致长这样：

1.png

很正常，是吧。
然而，当使用flex进行横向的布局时：

<block wx:for='{{VideoList}}' wx:key='key'>
   <view class='singleVideo' hover-class='item-press' catchtap='showDetail' data-id='{{item.id}}' data-title='{{item.title}}'>
     <image src='{{item.imageUrl}}' class='img' mode='scaleToFill'/>
     <text class='name'>这是文字说明这是文字说明这是文字说明这是文字说明这是文字说明这是文字说明这是文字说明这是文字说明这是文字说明这是文字说明</text>
   </view>
 </block>

.singleVideo {
  background: #fff;
  padding: 20rpx;
  display: flex;
  border-bottom: 20rpx solid #fafafa;
}
.img {
  margin-right: 8px;
  width: 160px;
  height: 90px;
}
.name {
  background-color: #d2f2ff;
  width: 200px;
  font-size: 12pt;
  line-height: 50rpx;
  display: -webkit-box ;
  overflow: hidden; /*隐藏溢出的文本  */
  text-overflow: ellipsis;
  word-break: break-all;/*自动换行*/
  -moz-box-orient: vertical; /*从上到下自动排列子元素*/
  -webkit-box-orient: vertical; 
  -webkit-line-clamp:2; /*显示的行数*/
}

之前被隐藏的文字又出现了！

2.png

这是为毛呢？请注意看背景色。当文本框被撑大的时候，溢出的文字就会显示出来。（在这里文本框的高度自动扩展到了父级布局的高度。）
在浪费了一番无用的搜索时间后，发现要解决这个问题其实也很简单。就是再套一层View。

<view>
        <text class='name'>这是文字说明这是文字说明这是文字说明这是文字说明这是文字说明这是文字说明这是文字说明这是文字说明这是文字说明这是文字说明</text>
</view>

完美

3.png