The Flex layout is displayed in a single line, with no ellipsis displayed

Flex: 3, 1, 1 is not set to a fixed width. When box is not set to line break, the width obtained is the width of the entire box, resulting in the following style overload problem

So you need to set the detail width:0, and the ellipsis will be displayed if there is more than one line.

The entire source code is as follows:

<template>
  <view class="houseInfo">
    <view class="top">
      <view class="title">Entrust houses</view>
      <view class="btn" @tap="editHouse" v-if="showEditBtn">Modification is located</view>
    </view>
    <view class="info">
      <view class="box">
        <view class="label">building</view>
        <view class="value">{{ houseDetail.communityName }} </view>
      </view>
      <view class="box">
        <view class="label">Building a movie theater</view>
        <view class="value">{{ houseDetail.comBuildingName || "-" }}</view>
      </view>
      <view class="box">
        <view class="label">Your room number,</view>
        <view class="value">{{ houseDetail.roomNo || "-" }}</view>
      </view>
    </view>
  </view>
</template>
Copy the code

<script>
export default {
  props: ["houseDetail"."showEditBtn"].data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    editHouse() {
      this.$emit("editHouse"); ,}}}; </script>Copy the code

<style lang="less" scoped>
.houseInfo {
  width: 622rpx;
  height: 168rpx;
  background: #ffffff;
  border-radius: 12rpx;
  .top {
    display: flex;
    justify-content: space-between;
    .title {
      margin-bottom: 24rpx;
      font-size: 36rpx;
      font-weight: bold;
      color: # 303133;
      line-height: 54rpx;
    }
    .btn {
      color: # 247257;
      font-size: 28upx; }}.info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .box {
      width: 0;
      &:nth-child(1) {
        flex: 3;
        margin-right: 32rpx;
        border-right: 1rpx solid #f0f2f5;
      }
      &:nth-child(2) {
        margin-right: 32rpx;
        flex: 1;
      }
      &:nth-child(3) {
        flex: 1;
      }
      .label {
        margin-bottom: 8rpx;
        font-size: 28rpx;
        color: # 909199;
        line-height: 42rpx;
      }
      .value {
        font-size: 32rpx;
        font-weight: bold;
        color: # 303133;
        line-height: 48rpx;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
Copy the code

Box-shadow: 0 8rpx 26rpx 0 rgba(0, 0, 0, 0.13);