布局
两栏布局，左边定宽，右边 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 可以被子节点无限撑开；因此 .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;
}
}
}
