CODEWITHSUNDEEP
htmlcss
Josh Holder
Josh Holder

Reputation: 21

CSS: Don't display child element if it doesn't completely fit in container

I have mocked up a simple version of the problem here: 

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

Basically I want the third child not to display if it doesn't completely fit inside the parent container.

I've tried using inline-blocks but it doesn't seem to wrap.

I'd rather not use JavaScript to sort this but all suggestions welcomed.

Upvotes: 2

Views: 68

Answers (1)

Naeem Shaikh
Naeem Shaikh

Reputation: 15715

As you said all suggestions are welcome, i have a jquery solution: FIDDLE

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

Upvotes: 3

Related Questions