布局

兩欄布局，左邊定寬，右邊 flex-grow: 1，自動填滿剩余空間。

image.png

   <view class="book-box">
     <view class="book-img">
       <image :src="book.image"  />
     </view>
     <view class="book-info">
       <view class="name">{{book.name}}</view>
       <view class="author">{{book.author}}</view>
       </view>
     </view>
   </view>

給 book-info 設置width： 0
如果不設置寬度， .book-info 可以被子節(jié)點無限撐開；因此 .name 總有足夠的寬度在一行內顯示所有文本，也就不能觸發(fā)截斷省略的效果。

SCSS

.book-box {
  display: flex;

  .book-img {
    width: 160rpx;
    height: 220rpx;
    margin-right: 40rpx;

    image {
      width: 160rpx;
      height: 220rpx;
    }
  }

  .book-info {
    flex-grow: 1;
    width: 0;

    view {
      margin-bottom: 8rpx;
      white-space: nowrap; /* 規(guī)定文本是否折行 */
      overflow: hidden; /* 規(guī)定超出內容寬度的元素隱藏 */
      text-overflow: ellipsis;
    }
  }
}

參考 https://www.cnblogs.com/BlackStorm/p/6793170.html