解决小程序文字溢出撑开父视图的问题

文字限制单行，溢出部分显示省略号，但是
发现下边的代码不起作用，会撑开父view

.content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

那么需要在父view加入
overflow: hidden;

如果父view外还有view 那就在爷爷view里加 overflow: hidden;

图片.png

wxml代码：

<view class="container">
  <view class="item">
    <image></image>
    <view class="right-view">
      <view class="intro">欢迎使用代码片段，可在控制台查看代码片段的说明和文档</view>
      <view class="tmp-view"></view>
    </view>
  </view>

  <view class="item">
    <image></image>
    <view class="right-view right-view2">
      <view class="intro">欢迎使用代码片段，可在控制台查看代码片段的说明和文档</view>
      <view class="tmp-view"></view>
    </view>
  </view>

  <view class="item">
    <image></image>
    <view class="tmp-right">
      <view class="right-bg">
      <view class="intro">欢迎使用代码片段，可在控制台查看代码片段的说明和文档</view>
      <view class="right-view right-view2">
        <view class="intro">欢迎使用代码片段，可在控制台查看代码片段的说明和文档</view>
        <view class="tmp-view"></view>
      </view>
    </view>
    </view>
  </view>
</view>

wxcss代码：

.container {

  display: flex;
  flex-direction: column;
  align-items: center;
}

.item {
  width: 690rpx;
  height: 200rpx;
  background-color: antiquewhite;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  padding: 30rpx;
  box-sizing: border-box;
  margin-top: 30rpx;
}

.item image {
  width: 100rpx;
  height: 100rpx;
  background-color: blueviolet;
  flex-shrink: 0;
}

.right-view {
  display: flex;
  justify-content: space-between;
  flex: auto;
  background-color: orange;
}

.right-view2 {

  overflow: hidden;
}


.intro {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tmp-view {
  width: 50rpx;
  height: 50rpx;
  background-color: brown;
  border-radius: 25rpx;
  flex-shrink: 0;
}

.right-bg {
  display: flex;
  flex-direction: column;
  flex: auto;
  overflow: hidden;
}
/* 如果父view外还有view 那就在爷爷view里加  overflow: hidden;*/
.tmp-right {
  overflow: hidden;
}

代码片段