css点一行有折叠的效果 |css 静态进度条

.container {
display: flex;
flex-wrap: nowrap;
overflow: hidden;
}
.item {
flex: 0 0 auto;
white-space: nowrap;
}
.item.hide {
width: 0;
height: 0;
margin: 0;
padding: 0;
visibility: hidden;
overflow: hidden;
}

上述代码中，大家使用Flex布局让容器内的元素不换行。接着，大家给每个元素增加了white-space: nowrap属性，使其不会换行。最后大家定义了一个.hide类，当元素需要折叠隐藏时，添加该类即可。该类主要将元素的宽高、外边距、内边距、可见性与溢出效果均设为0，从而实现了折叠隐藏的效果。

通过上述CSS技巧，大家可以满足在同一行内展示大量元素的需求，并且能够实现元素的折叠隐藏效果。