如何隐藏不适合固定高度框的额外列表项？

Question

我有包含 <ul> 列表内容的框。这些盒子的宽度略有变化，但高度固定。此列表内容是动态生成的，包含 0 - 200 个列表元素。但是，由于盒子的高度，我通常一次只能显示 3-5 个。 这个可以.

但是，我一直通过使用 ASP.NET MVC 代码人为地限制这些列表只显示前 4 个元素。这在大约 90% 的情况下有效 - 如果所有列表项都有大量文本（见下文），一些框仍然会溢出。

我想知道 CSS 中是否有一种方法可以像 overflow 属性之类的那样使用并隐藏不适合的列表元素？我已经在 <ul> 上尝试了 overflow: hidden 无济于事。我想这是因为列表不知道盒子的高度或其他东西

说明： 理想情况下，您不会看到 <li> 中任何不合适的部分。看到这个 fiddle

我不知道这些项目中的任何一个会提前多久，或者它们可能有多少元素，而且盒子的 width/height 是不可修改的。 有什么想法吗？

原文Fiddle:http://jsfiddle.net/emowbngx/1/

方框示例 HTML:

<div class="box">
    <ul>
        <li>List item</li>
        <li>these LI's are dynamically generated</li>
        <li>I have no idea of their length ahead of time</li>
        <li>Seth Rollins</li>
    </ul>
</div>

框CSS:

.box {
    height: 110px;
    width: 350px;
    min-width: 350px;
    float: left;
    margin: 8px 16px 8px 0;
    position: relative;

    border: 1px solid black;
}

Answer 1

这不会（总是！）删除最后一个 child，但是，也许它可能是解决方案（更好，恕我直言）：

http://jsfiddle.net/emowbngx/6/

$('.box').each(function(i) {

  if ($(this).children().height() > $(this).height())

  {
    //$(this).find('li:last-child').css('display','none');
    $(this).find('li').each(function(j) {

      if ($(this).position().top + $(this).height() > $('.box').height()) {

        $(this).css('display', 'none');

      }

    });

  }

});

注：没测试太久，试试把li的文字改一下，自己看...

Answer 2

这是我的解决方案： http://jsfiddle.net/gc5un34j/3/

使用element.offsetHeight获取列表中每个元素的高度，然后将其与容器进行比较；

JQuery:

var listItems = $('ul li'); //The list rows
var listContainer = $('ul'); //The list
var listHeight = 0; //Contains the height of the 4 elements together

for(var i = 0; i < listItems.length; i++) {
    listHeight += listItems[i].offsetHeight;
    //If the row is bigger than the container, hides it, [0] to access the DOM Element
    if(listContainer[0].offsetHeight < listHeight) { 
        $(listItems[i]).hide();
    }
}

支持 QuerySelectors 的浏览器中的纯 JS：

var listItems = document.querySelectorAll('ul li'); //The list rows
var listContainer = document.querySelector('ul'); //The list 

var listHeight = 0; //Contains the height of the 4 elements together

for(var i = 0; i < listItems.length; i++) {
    listHeight += listItems[i].offsetHeight;

    //If the row is bigger than the container, hides it
    if(listContainer.offsetHeight < listHeight) { 
        listItems[i].style.display = 'none';
    }
}

在 Chrome 44 和 Firefox

中测试

Answer 3

我可能已经找到了使用纯 CSS 解决方案来执行此操作的方法。它涉及使用 flexbox 和一些作弊来使用 :before 伪元素显示项目符号。它甚至允许在容器内将可见的 li 元素垂直居中。

fiddle: https://jsfiddle.net/aq34sb17/2/

CSS

ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100px;
    max-width: 180px;
    overflow: hidden;
    padding-left: 15px;
    justify-content: space-around;
}

li {
    display: block;
    width: 100%;
    padding-left: 10px;
    position: relative;
}

li:before {
    content: '22';
    position: absolute;
    left: -5px;
}

这是适用于您的 fiddle 的解决方案：http://jsfiddle.net/emowbngx/7/

如何隐藏不适合固定高度框的额外列表项？

How can I hide the extra list items that don't fit within a fixed-height box?

html

css

overflow

html-lists