Question

我有.list .item个，就像这个：

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

.item和.list都有最大高度，比如100px和280px。当它溢出时我想隐藏最后的.item，可能没有JS。

我的意思是，如果.list有overflow: hidden，并且所有.item达到最大高度，那么最后一个会被部分切割。我想完全隐藏它，即它适合，或者它消失。

我可以更改CSS和HTML（包括，例如，使用<ul><li>...代替div s）

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

Answer 2

你需要javascript来计算项目的高度，或者如果你想用css做它并且你知道两个元素的高度都不会改变，你可以使用nth-child css选择器计算适合和隐藏其他元素的数量nth-child

在通过CSS溢出的情况下隐藏最后一项

2 个答案: