overflow hidden 的CSS

Question

如何显示 div 容器的最后一个可见的 li 元素，另外说“overflow:hidden” - 将它对齐到底部？

<ul style="height:20px; overflow:hidden;">
<li>1</li>
<li>2</li>
<li>3</li>
<li>this eventually should be visible</li>
<li>this should be visible</li>
</ul>

Answer 1

我不确定这样做的目的是什么，或者你打算如何显示其他 li 但是......Flexbox 可以做到这一点。

ul {
  list-style-type: none;
  border: 1px solid grey;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 20px;
  overflow: hidden;
  font-size: 16px;
  line-height: 20px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>this eventually should be visible</li>
  <li>this should be visible</li>
</ul>