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

布局

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

image.png

   
     
       
     
     
       {{book.name}}
       {{book.author}}
       
     
   

给 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