Fatal编程技术网
  • css/
  • 隐藏溢出的CSS

隐藏溢出的CSS

css

隐藏溢出的CSS,css,Css,如何使用“溢出：隐藏”显示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</l

如何使用“溢出：隐藏”显示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>

    

  • 一,
    • 

  • 二,
    • 

  • 三,
    • 

  • 这最终应该是可见的
    • 

  • 这应该是可见的
    •
使用jquery：

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

如果有CSS方式，请回复

我不确定这是为了什么，也不确定您打算如何显示另一个
li
，但是……Flexbox可以做到这一点

ul{
列表样式类型：无；
边框：1px纯灰；
显示器：flex；
弯曲方向：立柱；
证明内容：柔性端；
高度：20px；
溢出：隐藏；
字体大小：16px；
线高：20px；
}
    

  • 一,
    • 

  • 二,
    • 

  • 三,
    • 

  • 这最终应该是可见的
    • 

  • 这应该是可见的
    •
您有无效的标记，
li
元素只允许在
ul
s内部。还有，你为什么要这么做？到目前为止你试过什么？你想把高度限制在20px吗？或者您希望它与
  • 列表的高度相同吗？您可以尝试
    溢出：滚动
    而不是
    隐藏
    。高度：20px实际上是一个很小的值。Maulzal限制在20px Ahbi，这在我的应用程序中不是故意的，嗯，像这样残害一个
    ul
    ，也不太好，但另一方面，它做得很好。由于我没有想到其他好的/干净的选项，我+1。