2

私は次のような.listofを持っています.item:

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

と の両方.itemに最大の.list高さがあります。たとえば、100px と 280px です。おそらくJSなしで、オーバーフローしたときに最後を非表示にしたいと思います。.item

つまり、.listがoverflow: hiddenあり、すべて.itemの が最大の高さに達した場合、最後の 1 つが部分的にカットされるということです。完全に非表示にしたい、つまり、収まるか、消えるかのどちらかです。

CSS と HTML の両方を変更できます (たとえば、 s の<ul><li>...代わりに使用するなどdiv) 。

4

2 に答える 2

2

アイテムの高さが最大値ではなく固定されている場合は、nth-child を使用して、オーバーフローし始めるアイテムを予測できます。

サンプル| コード

.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ソリューションがあります。

サンプル| コード

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;
}
于 2012-04-11T11:23:08.830 に答える
0

アイテムの高さを計算するには JavaScript が必要です。または、CSS だけで実行したい場合で、両方の要素の高さが変わらないことがわかっている場合は、nth-child css セレクターnth- child を使用して、他の要素に適合する数を計算し、非表示にすることができます。

于 2012-04-11T11:05:02.090 に答える