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

布局

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

image.png

1
2
3
4
5
6
7
8
9
10
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.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

Exchange blogroll: http://laker.me/blog
Github:https://github.com/younglaker


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

本文原创自http://laker.me/blog,转载请注明出处,欢迎交换友链

如果本文对您有帮助,微信扫一扫,请我吃个鸡腿吧