css - 通过 CSS 隐藏最后一项以防溢出

Question

我有一个.list的.item s，就像这个:

<div class="list">
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
</div>

两者.item和.list有一个最大高度，例如 100 像素和 280 像素。 我想隐藏最后一个.item当它溢出时，可能没有JS。

我的意思是如果.list有overflow: hidden ，以及所有.item s 达到最大高度，然后最后一个被部分切割。我想完全隐藏它，即要么它适合，要么它消失。

我可以更改 CSS 和 HTML(包括例如使用 <ul><li>... 而不是 div )

Answer 1

如果您的元素具有固定高度，而不是最大值，您可以使用 nth-child 来预测它将在哪个元素开始溢出。

Sample |代码

.item{
    height: 75px;
    border: 1px solid blue;
    overflow: auto;
}

.item:nth-child(1n+4){ /* 4th element and up */
    display: none;
}

.list{
    max-height: 280px;
    border: 1px solid red;
    overflow: hidden;
}

但是，由于它们的高度不固定，因此这种动态的唯一解决方案是使用 JavaScript。

---

关于这一点，这里有一个 JavaScript 解决方案。

Sample |代码

Javascript

var eList = document.getElementById("list"),
    eItems = eList.getElementsByTagName("div"),
    iMaxHeight = parseInt(getStyle(eList, "max-height")),
    iSumHeight = 0;

for(i = 0; i < eItems.length; i++){
    var iHeight = parseInt(getStyle(eItems[i], "height"));
    //Check if next item will overflow, in which case, we're going to hide it
    if((iSumHeight + iHeight) >= iMaxHeight){
        eItems[i].style.display = "none";
    }else{
        iSumHeight += iHeight;
    }
}

function getStyle(el,styleProp){
    if (el.currentStyle)
        var y = el.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);
    return y;
}

HTML

<div id="list">
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar aliquet risus, vitae suscipit tortor cursus ac.</div>
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar aliquet risus, vitae suscipit tortor cursus ac. Nam venenatis, nunc sit amet elementum semper, sem purus ultrices diam, quis scelerisque elit nulla sed sapien. Vivamus urna metus, tincidunt ac accumsan et, dignissim at lorem.</div>
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar aliquet risus, vitae suscipit tortor cursus ac. Nam venenatis, nunc sit amet elementum semper, sem purus ultrices diam, quis scelerisque elit nulla sed sapien. Vivamus urna metus, tincidunt ac accumsan et, dignissim at lorem.</div>
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar aliquet risus, vitae suscipit tortor cursus ac. Nam venenatis, nunc sit amet elementum semper, sem purus ultrices diam, quis scelerisque elit nulla sed sapien. Vivamus urna metus, tincidunt ac accumsan et, dignissim at lorem.</div>
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar aliquet risus, vitae suscipit tortor cursus ac. Nam venenatis, nunc sit amet elementum semper, sem purus ultrices diam, quis scelerisque elit nulla sed sapien. Vivamus urna metus, tincidunt ac accumsan et, dignissim at lorem.</div>
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar aliquet risus, vitae suscipit tortor cursus ac. Nam venenatis, nunc sit amet elementum semper, sem purus ultrices diam, quis scelerisque elit nulla sed sapien. Vivamus urna metus, tincidunt ac accumsan et, dignissim at lorem.</div>
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar aliquet risus, vitae suscipit tortor cursus ac. Nam venenatis, nunc sit amet elementum semper, sem purus ultrices diam, quis scelerisque elit nulla sed sapien. Vivamus urna metus, tincidunt ac accumsan et, dignissim at lorem.</div>
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar aliquet risus, vitae suscipit tortor cursus ac.</div>
</div>

CSS

.item{
    max-height: 110px;
    border: 1px solid blue;
    overflow: auto;
}

#list{
    max-height: 290px;
    border: 1px solid red;
    overflow: hidden;
}