在微信小程序中一个父级view中包含若干个子集view,这些子view横向分布,当子view数量过多时超出了一行则在行末尾显示<view>……</view>
时间: 2024-03-16 07:45:42 浏览: 13
你可以使用 flex 布局来实现这个功能。具体来说,你可以给父级 view 设置 display: flex 和 flex-wrap: wrap,使其子集 view 横向排列,并在超出一行时自动换行。然后,你可以使用伪类 :after 来在最后一个子集 view 后添加一个额外的 view,用于显示省略号。以下是一个示例代码:
```html
<style>
.parent {
display: flex;
flex-wrap: wrap;
}
.child {
width: 100px;
height: 100px;
margin: 10px;
background-color: #ccc;
}
.parent:after {
content: "……";
display: block;
width: 100px;
height: 100px;
margin: 10px;
background-color: #ccc;
}
.parent:after:last-child {
content: "";
margin-right: 0;
}
</style>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
```
在上面的代码中,我们使用 :after 伪类来添加一个额外的子集 view,并使用 :last-child 伪类来取消最后一个子集 view 的省略号。你可以根据自己的需求调整样式。