Question

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

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

我想知道CSS中是否有像overflow属性一样使用的方法并隐藏不适合的列表元素？我在overflow: hidden上尝试<ul>无济于事。我想这是因为列表不知道盒子的高度是什么

澄清：理想情况下，您不会看到<li>中任何不适合的部分。见fiddle

我不知道这些物品会提前多长时间或它们甚至可能有多少元素，并且盒子的宽度/高度不可修改。 任何想法？

原始小提琴： http://jsfiddle.net/emowbngx/1/

Box 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>

Box CSS：

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

    border: 1px solid black;
}

Answer 1

我可能已经找到了一种使用纯CSS解决方案的方法。它涉及使用flexbox和一些作弊来使用：before伪元素来显示子弹。它甚至允许在容器内垂直居中显示可见的li元素。

小提琴：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: '\2022';
    position: absolute;
    left: -5px;
}

这里是适用于你的小提琴的解决方案：http://jsfiddle.net/emowbngx/7/

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

这不会删除（总是！）最后一个孩子，但是，也许它可能是解决方案（甚至更好，imho）：

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中的文字，并亲自看看......

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

3 个答案: