Question

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

<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可以做到这一点。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

使用jquery：

var outerHeight = 0;
var maxheight = 22;
$($("li").get().reverse()).each(function() { 
outerHeight += $(this).outerHeight();
if(outerHeight >= maxheight) {  
$(this).remove();
}
})

https://jsfiddle.net/arpecop/jy83wwye/1/

如果有CSS方式请回复

隐藏溢出的CSS

2 个答案: