是否可以在HTML / CSS中隐藏部分显示的列表项？

Question

我在另一个框旁边的框中有一个属性列表（ul）。我需要两个框都是相同的高度，所以我需要确保属性列表的所有内容都保存在框中。

截图解释：

这是我列表的底部：

然后我尝试了溢出但最后显示了一个部分列表项，当我不想显示它时。

Answer 1

使用粗暴，简单的方法。 计算父容器中可以包含的列表项数：

1。）让我们说ul是40像素高

2.。）假设li高20像素

ul li:nth-of-type(2) ~ li {
    visibility: hidden;
}

https://jsfiddle.net/davidThomas/NBurh/1/

如果你想要滚动和花哨的技巧，你将不得不使用javascript来计算最大可见元素（而不是父高度加上父级的高度+滚动的数量，以了解哪些元素是可见的）

请注意我使用visibility：hidden而不是display：none。

我这样做是为了在滚动浏览期间使用javascript实现show-hide时，滚动条可以包含隐藏的元素。

如果您不打算这样做 - ＆gt;替换visibility：隐藏display：none，删除滚动条。

Answer 2

假设这是你的清单：

#derp {
  width: 150px;
  height: 100px;
  border: 2px solid black;
  list-style-type: none;
  padding: 0;
}
#derp>li {
  height: 40px;
  border-bottom: 1px solid #ccc;
}

<ul id="derp">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

如您所见，实际上只有两个项目适合，第三个是切片，第四个是正确的。现在让我们应用一些魔法......

#derp {
  width: 150px;
  height: 100px;
  border: 2px solid black;
  list-style-type: none;
  padding: 0;
  
  column-width: 150px;
  -webkit-column-width: 150px;
  overflow: hidden;
}
#derp>li {
  height: 40px;
  width: 100%;
  border-bottom: 1px solid #ccc;

  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

<ul id="derp">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

就是这样！通过启用列，浏览器将在项目无法适应时立即开始创建列，并且通过使用break-inside: avoid不会拆分单个项目，它们将只移动到下一列。最后，overflow: hidden确保此新列不在视线范围内。