布局

兩欄布局，左邊定寬，右邊 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;

}

}

}