Question

我在这里嘲笑了一个简单版本的问题：

.container {
    width: 200px;
    height: 400px;
    background-color: salmon;
    overflow: hidden;
}

.item {
    padding: 20px;
    border: 1px solid black;
}

<div class="container">
    <div class="item">Headline</div>
    <div class="item">Subheading</div>
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit gravida pulvinar. Donec porttitor congue sapien. Quisque euismod eleifend tortor. Etiam ultrices vitae lectus nec pellentesque. Nunc aliquam fringilla est, ac euismod ante mollis vel. Suspendisse eget lorem ut sem laoreet semper sed eget leo. Aliquam sagittis in est a eleifend. Nunc at justo non metus fermentum vestibulum in rutrum dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur convallis, sapien in pharetra imperdiet, nisi quam posuere justo, a condimentum nisi tellus ac arcu. Mauris eu felis mi. In aliquet blandit euismod. Praesent quam quam, ultrices vel ipsum viverra, fringilla vehicula urna.</div>
</div>

基本上我希望第三个孩子不能显示它是否完全适合父容器。

我尝试过使用内联块，但它似乎没有包装。

我宁愿不使用JavaScript对此进行排序，但欢迎所有建议。

Answer 1

正如你所说的欢迎所有建议，我有一个jquery解决方案： FIDDLE

$(function(){
 var x= 400-parseInt( $('.item').first().height()+$('.item').first().next().height());
    if($('.item').last().height()>x)
    {
        $('.item').last().hide()
    }
})

CSS：如果子元素不完全适合容器，则不要显示子元素

1 个答案: