css3 flex 省略号,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;

}

}

}