flex 布局下 CSS 文本超出单行宽度后显示省略号

布局

两栏布局，左边定宽，右边 flex-grow: 1，自动填满剩余空间。

   <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 可以被子节点无限撑开；因此 .name 总有足够的宽度在一行内显示所有文本，也就不能触发截断省略的效果。

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; /* 规定文本是否折行 */
      overflow: hidden; /* 规定超出内容宽度的元素隐藏 */
      text-overflow: ellipsis;
    }
  }
}

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