小编sco*_*sco的帖子

CSS如何只显示1行并隐藏其他行?

我的页面顶部有一个导航。其中我有 5 家不同公司的 5 只市场股票。我想以全宽显示 5,但随着窗口变小,我基本上想要的行为是切断溢出的窗口,并调整剩余窗口的大小以填充导航容器(所以假设在某些时候它只会显示 3 只股票并隐藏其他股票)。这是现在的代码:

.stocks-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 150px);
  grid-template-rows:1fr;
  grid-auto-rows: 0;
  overflow-y: hidden;
  justify-content: space-between;
  width: 75%;
  font-size: 11px;
  overflow-y: hidden;
}
Run Code Online (Sandbox Code Playgroud)

目前这几乎就是我所需要的。问题是,现在溢出的库存项目(基本上应该创建一个新行)被挤在第一行的顶部。同样,我不希望他们创建新行或可滚动。我只是根本不想让他们出现。有任何想法吗?

css frontend grid-layout reactjs css-grid

9
推荐指数
1
解决办法
6144
查看次数

标签 统计

css ×1

css-grid ×1

frontend ×1

grid-layout ×1

reactjs ×1