Avoid Clipping when using overflow:hidden;

Question

I have a section of a site that I want to set a max-height and then hide any content that overflows. The code looks like this:

HTML

<div class="blog-list">
   <!-- CONTENT -->
</div>

CSS

.blog-list{
    max-height: 243px;
    overflow: hidden;
}

It works fine but the content inside has variable heights and I'm finding that content, every now and then, will appear clipped. Screenshot:

Is there a way to solve this problem? I prefer a CSS only solution but would accept a JS/jQuery solution, if that is what is required.

Answer 1

According to a another stackoverflow question, you can hide elements that don't fit in your container by inserting this jQuery code in your script: (I tailored it to your needs - but you will need to give your container an id of blog-list.

var neededHeight = $('#blog-list').outerHeight();
var totalChildHeight = 0;
$("#blog-list").children("li").each(function() {
totalChildHeight += $(this).outerHeight(true); 
if(totalChildHeight > neededHeight) {
   $(this).hide();
   $(this).nextAll().hide();
   return false;
}
});

Here's a sample: (where the 13th and 14th li item won't show because they don't fit)

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
var neededHeight = $('#blog-list').outerHeight();
var totalChildHeight = 0;
$("#blog-list").children("li").each(function() {
totalChildHeight += $(this).outerHeight(true); 
if(totalChildHeight > neededHeight) {
   $(this).hide();
   $(this).nextAll().hide();
   return false;
}
});
</script>
<ul id="blog-list" style="background:red;height:243px;width:100%;overflow:hidden">
  <li> Lorem ipsum dolor sit amet 1</li>
  <li> Lorem ipsum dolor sit amet 2</li>
  <li> Lorem ipsum dolor sit amet 3</li>
  <li> Lorem ipsum dolor sit amet 4</li>
  <li> Lorem ipsum dolor sit amet 5</li>
  <li> Lorem ipsum dolor sit amet 6</li>
  <li> Lorem ipsum dolor sit amet 7</li>
  <li> Lorem ipsum dolor sit amet 8</li>
  <li> Lorem ipsum dolor sit amet 9</li>
  <li> Lorem ipsum dolor sit amet 10</li>
  <li> Lorem ipsum dolor sit amet 11</li>
  <li> Lorem ipsum dolor sit amet 12</li>
  <li> Lorem ipsum dolor sit amet 13</li>
  <li> Lorem ipsum dolor sit amet 14</li>
<ul>

Answer 2

It really all depends on the ratio of your line-height to your font-size (based on your font-family)

See this snippet for instances, it won't show up (half-lines) due to having 1.33% of ratio regarding line-height / font-size (16px/12px)

Snippet

.blog-list {
  max-height: 243px;
  overflow: hidden;
  font:400 12px/16px Arial;
}

<div class="blog-list">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis lacus vel urna vehicula aliquam. Proin lorem massa, efficitur vel consectetur non, luctus eu justo. Vestibulum urna dui, vulputate eget mollis nec, iaculis lacinia metus. Class aptent
  taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla id sem finibus, maximus enim ut, congue leo. Phasellus vestibulum eleifend ex, ac feugiat augue tempus a. Suspendisse potenti. Nam orci augue, ultricies id diam posuere,
  mattis commodo leo. Mauris aliquam velit sed purus blandit malesuada. Curabitur id est ac elit commodo vehicula. Donec nec porttitor nisl. Sed volutpat condimentum ante, nec mollis massa sodales in. Vestibulum aliquet fermentum porta. Morbi dapibus
  sodales pulvinar. Sed dapibus viverra erat, faucibus dapibus ligula luctus sed. Sed hendrerit, lectus sit amet tristique semper, ante urna tempor velit, non pellentesque mi metus ut nisl. Mauris fermentum ullamcorper nibh. Integer efficitur, nisl sed
  tincidunt pulvinar, nisi justo ultrices lectus, a sollicitudin sapien est viverra augue. Nullam sed efficitur urna. Vivamus dictum felis quis purus pulvinar, at fringilla leo sodales. Donec quis nisl imperdiet, tempor nibh in, condimentum ligula. Sed
  suscipit nisl enim, et cursus urna aliquet vitae. Sed pharetra consequat eleifend. Duis imperdiet urna id laoreet placerat. Pellentesque ullamcorper porttitor diam, interdum dictum massa placerat vitae. Nulla facilisi. Duis placerat accumsan neque nec
  tincidunt. Nunc pretium neque at posuere egestas. Sed lobortis lorem dolor, ac volutpat eros fringilla sit amet. Proin facilisis, velit in tincidunt blandit, est erat dapibus elit, quis tristique massa dui vitae ligula. Cras vel nulla vel arcu auctor
  lacinia sit amet id magna. Curabitur dapibus ultricies blandit. Sed sit amet arcu eu sapien fermentum posuere. Nullam ut scelerisque est, sit amet maximus orci. Curabitur nibh nibh, accumsan et justo a, aliquam Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Vestibulum quis lacus vel urna vehicula aliquam. Proin lorem massa, efficitur vel consectetur non, luctus eu justo. Vestibulum urna dui, vulputate eget mollis nec, iaculis lacinia metus. Class aptent taciti sociosqu ad litora torquent
  per conubia nostra, per inceptos himenaeos. Nulla id sem finibus, maximus enim ut, congue leo. Phasellus vestibulum eleifend ex, ac feugiat augue tempus a. Suspendisse potenti. Nam orci augue, ultricies id diam posuere, mattis commodo leo. Mauris aliquam
  velit sed purus blandit malesuada. Curabitur id est ac elit commodo vehicula. Donec nec porttitor nisl. Sed volutpat condimentum ante, nec mollis massa sodales in. Vestibulum aliquet fermentum porta. Morbi dapibus sodales pulvinar. Sed dapibus viverra
  erat, faucibus dapibus ligula luctus sed. Sed hendrerit, lectus sit amet tristique semper, ante urna tempor velit, non pellentesque mi metus ut nisl. Mauris fermentum ullamcorper nibh. Integer efficitur, nisl sed tincidunt pulvinar, nisi justo ultrices
  lectus, a sollicitudin sapien est viverra augue. Nullam sed efficitur urna. Vivamus dictum felis quis purus pulvinar, at fringilla leo sodales. Donec quis nisl imperdiet, tempor nibh in, condimentum ligula. Sed suscipit nisl enim, et cursus urna aliquet
  vitae. Sed pharetra consequat eleifend. Duis imperdiet urna id laoreet placerat. Pellentesque ullamcorper porttitor diam, interdum dictum massa placerat vitae. Nulla facilisi. Duis placerat accumsan neque nec tincidunt. Nunc pretium neque at posuere
  egestas. Sed lobortis lorem dolor, ac volutpat eros fringilla sit amet. Proin facilisis, velit in tincidunt blandit, est erat dapibus elit, quis tristique massa dui vitae ligula. Cras vel nulla vel arcu auctor lacinia sit amet id magna. Curabitur dapibus
  ultricies blandit. Sed sit amet arcu eu sapien fermentum posuere. Nullam ut scelerisque est, sit amet maximus orci. Curabitur nibh nibh, accumsan et justo a, aliquam Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis lacus vel
  urna vehicula aliquam. Proin lorem massa, efficitur vel consectetur non, luctus eu justo. Vestibulum urna dui, vulputate eget mollis nec, iaculis lacinia metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  Nulla id sem finibus, maximus enim ut, congue leo. Phasellus vestibulum eleifend ex, ac feugiat augue tempus a. Suspendisse potenti. Nam orci augue, ultricies id diam posuere, mattis commodo leo. Mauris aliquam velit sed purus blandit malesuada. Curabitur
  id est ac elit commodo vehicula. Donec nec porttitor nisl. Sed volutpat condimentum ante, nec mollis massa sodales in. Vestibulum aliquet fermentum porta. Morbi dapibus sodales pulvinar. Sed dapibus viverra erat, faucibus dapibus ligula luctus sed.
  Sed hendrerit, lectus sit amet tristique semper, ante urna tempor velit, non pellentesque mi metus ut nisl. Mauris fermentum ullamcorper nibh. Integer efficitur, nisl sed tincidunt pulvinar, nisi justo ultrices lectus, a sollicitudin sapien est viverra
  augue. Nullam sed efficitur urna. Vivamus dictum felis quis purus pulvinar, at fringilla leo sodales. Donec quis nisl imperdiet, tempor nibh in, condimentum ligula. Sed suscipit nisl enim, et cursus urna aliquet vitae. Sed pharetra consequat eleifend.
  Duis imperdiet urna id laoreet placerat. Pellentesque ullamcorper porttitor diam, interdum dictum massa placerat vitae. Nulla facilisi. Duis placerat accumsan neque nec tincidunt. Nunc pretium neque at posuere egestas. Sed lobortis lorem dolor, ac volutpat
  eros fringilla sit amet. Proin facilisis, velit in tincidunt blandit, est erat dapibus elit, quis tristique massa dui vitae ligula. Cras vel nulla vel arcu auctor lacinia sit amet id magna. Curabitur dapibus ultricies blandit. Sed sit amet arcu eu sapien
  fermentum posuere. Nullam ut scelerisque est, sit amet maximus orci. Curabitur nibh nibh, accumsan et justo a, aliquam Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis lacus vel urna vehicula aliquam. Proin lorem massa, efficitur
  vel consectetur non, luctus eu justo. Vestibulum urna dui, vulputate eget mollis nec, iaculis lacinia metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla id sem finibus, maximus enim ut, congue leo.
  Phasellus vestibulum eleifend ex, ac feugiat augue tempus a. Suspendisse potenti. Nam orci augue, ultricies id diam posuere, mattis commodo leo. Mauris aliquam velit sed purus blandit malesuada. Curabitur id est ac elit commodo vehicula. Donec nec porttitor
  nisl. Sed volutpat condimentum ante, nec mollis massa sodales in. Vestibulum aliquet fermentum porta. Morbi dapibus sodales pulvinar. Sed dapibus viverra erat, faucibus dapibus ligula luctus sed. Sed hendrerit, lectus sit amet tristique semper, ante
  urna tempor velit, non pellentesque mi metus ut nisl. Mauris fermentum ullamcorper nibh. Integer efficitur, nisl sed tincidunt pulvinar, nisi justo ultrices lectus, a sollicitudin sapien est viverra augue. Nullam sed efficitur urna. Vivamus dictum felis
  quis purus pulvinar, at fringilla leo sodales. Donec quis nisl imperdiet, tempor nibh in, condimentum ligula. Sed suscipit nisl enim, et cursus urna aliquet vitae. Sed pharetra consequat eleifend. Duis imperdiet urna id laoreet placerat. Pellentesque
  ullamcorper porttitor diam, interdum dictum massa placerat vitae. Nulla facilisi. Duis placerat accumsan neque nec tincidunt. Nunc pretium neque at posuere egestas. Sed lobortis lorem dolor, ac volutpat eros fringilla sit amet. Proin facilisis, velit
  in tincidunt blandit, est erat dapibus elit, quis tristique massa dui vitae ligula. Cras vel nulla vel arcu auctor lacinia sit amet id magna. Curabitur dapibus ultricies blandit. Sed sit amet arcu eu sapien fermentum posuere. Nullam ut scelerisque est,
  sit amet maximus orci. Curabitur nibh nibh, accumsan et justo a, aliquam
</div>

Now see this snippet with system default font-size font-family and line-height using Firefox which are 16px serif and 20px respectively. Giving a ratio of 1.25% (20px/16px) and it still works.

Snippet

.blog-list {
  max-height: 243px;
  overflow: hidden;
}

<div class="blog-list">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis lacus vel urna vehicula aliquam. Proin lorem massa, efficitur vel consectetur non, luctus eu justo. Vestibulum urna dui, vulputate eget mollis nec, iaculis lacinia metus. Class aptent
  taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla id sem finibus, maximus enim ut, congue leo. Phasellus vestibulum eleifend ex, ac feugiat augue tempus a. Suspendisse potenti. Nam orci augue, ultricies id diam posuere,
  mattis commodo leo. Mauris aliquam velit sed purus blandit malesuada. Curabitur id est ac elit commodo vehicula. Donec nec porttitor nisl. Sed volutpat condimentum ante, nec mollis massa sodales in. Vestibulum aliquet fermentum porta. Morbi dapibus
  sodales pulvinar. Sed dapibus viverra erat, faucibus dapibus ligula luctus sed. Sed hendrerit, lectus sit amet tristique semper, ante urna tempor velit, non pellentesque mi metus ut nisl. Mauris fermentum ullamcorper nibh. Integer efficitur, nisl sed
  tincidunt pulvinar, nisi justo ultrices lectus, a sollicitudin sapien est viverra augue. Nullam sed efficitur urna. Vivamus dictum felis quis purus pulvinar, at fringilla leo sodales. Donec quis nisl imperdiet, tempor nibh in, condimentum ligula. Sed
  suscipit nisl enim, et cursus urna aliquet vitae. Sed pharetra consequat eleifend. Duis imperdiet urna id laoreet placerat. Pellentesque ullamcorper porttitor diam, interdum dictum massa placerat vitae. Nulla facilisi. Duis placerat accumsan neque nec
  tincidunt. Nunc pretium neque at posuere egestas. Sed lobortis lorem dolor, ac volutpat eros fringilla sit amet. Proin facilisis, velit in tincidunt blandit, est erat dapibus elit, quis tristique massa dui vitae ligula. Cras vel nulla vel arcu auctor
  lacinia sit amet id magna. Curabitur dapibus ultricies blandit. Sed sit amet arcu eu sapien fermentum posuere. Nullam ut scelerisque est, sit amet maximus orci. Curabitur nibh nibh, accumsan et justo a, aliquam Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Vestibulum quis lacus vel urna vehicula aliquam. Proin lorem massa, efficitur vel consectetur non, luctus eu justo. Vestibulum urna dui, vulputate eget mollis nec, iaculis lacinia metus. Class aptent taciti sociosqu ad litora torquent
  per conubia nostra, per inceptos himenaeos. Nulla id sem finibus, maximus enim ut, congue leo. Phasellus vestibulum eleifend ex, ac feugiat augue tempus a. Suspendisse potenti. Nam orci augue, ultricies id diam posuere, mattis commodo leo. Mauris aliquam
  velit sed purus blandit malesuada. Curabitur id est ac elit commodo vehicula. Donec nec porttitor nisl. Sed volutpat condimentum ante, nec mollis massa sodales in. Vestibulum aliquet fermentum porta. Morbi dapibus sodales pulvinar. Sed dapibus viverra
  erat, faucibus dapibus ligula luctus sed. Sed hendrerit, lectus sit amet tristique semper, ante urna tempor velit, non pellentesque mi metus ut nisl. Mauris fermentum ullamcorper nibh. Integer efficitur, nisl sed tincidunt pulvinar, nisi justo ultrices
  lectus, a sollicitudin sapien est viverra augue. Nullam sed efficitur urna. Vivamus dictum felis quis purus pulvinar, at fringilla leo sodales. Donec quis nisl imperdiet, tempor nibh in, condimentum ligula. Sed suscipit nisl enim, et cursus urna aliquet
  vitae. Sed pharetra consequat eleifend. Duis imperdiet urna id laoreet placerat. Pellentesque ullamcorper porttitor diam, interdum dictum massa placerat vitae. Nulla facilisi. Duis placerat accumsan neque nec tincidunt. Nunc pretium neque at posuere
  egestas. Sed lobortis lorem dolor, ac volutpat eros fringilla sit amet. Proin facilisis, velit in tincidunt blandit, est erat dapibus elit, quis tristique massa dui vitae ligula. Cras vel nulla vel arcu auctor lacinia sit amet id magna. Curabitur dapibus
  ultricies blandit. Sed sit amet arcu eu sapien fermentum posuere. Nullam ut scelerisque est, sit amet maximus orci. Curabitur nibh nibh, accumsan et justo a, aliquam Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis lacus vel
  urna vehicula aliquam. Proin lorem massa, efficitur vel consectetur non, luctus eu justo. Vestibulum urna dui, vulputate eget mollis nec, iaculis lacinia metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  Nulla id sem finibus, maximus enim ut, congue leo. Phasellus vestibulum eleifend ex, ac feugiat augue tempus a. Suspendisse potenti. Nam orci augue, ultricies id diam posuere, mattis commodo leo. Mauris aliquam velit sed purus blandit malesuada. Curabitur
  id est ac elit commodo vehicula. Donec nec porttitor nisl. Sed volutpat condimentum ante, nec mollis massa sodales in. Vestibulum aliquet fermentum porta. Morbi dapibus sodales pulvinar. Sed dapibus viverra erat, faucibus dapibus ligula luctus sed.
  Sed hendrerit, lectus sit amet tristique semper, ante urna tempor velit, non pellentesque mi metus ut nisl. Mauris fermentum ullamcorper nibh. Integer efficitur, nisl sed tincidunt pulvinar, nisi justo ultrices lectus, a sollicitudin sapien est viverra
  augue. Nullam sed efficitur urna. Vivamus dictum felis quis purus pulvinar, at fringilla leo sodales. Donec quis nisl imperdiet, tempor nibh in, condimentum ligula. Sed suscipit nisl enim, et cursus urna aliquet vitae. Sed pharetra consequat eleifend.
  Duis imperdiet urna id laoreet placerat. Pellentesque ullamcorper porttitor diam, interdum dictum massa placerat vitae. Nulla facilisi. Duis placerat accumsan neque nec tincidunt. Nunc pretium neque at posuere egestas. Sed lobortis lorem dolor, ac volutpat
  eros fringilla sit amet. Proin facilisis, velit in tincidunt blandit, est erat dapibus elit, quis tristique massa dui vitae ligula. Cras vel nulla vel arcu auctor lacinia sit amet id magna. Curabitur dapibus ultricies blandit. Sed sit amet arcu eu sapien
  fermentum posuere. Nullam ut scelerisque est, sit amet maximus orci. Curabitur nibh nibh, accumsan et justo a, aliquam Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis lacus vel urna vehicula aliquam. Proin lorem massa, efficitur
  vel consectetur non, luctus eu justo. Vestibulum urna dui, vulputate eget mollis nec, iaculis lacinia metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla id sem finibus, maximus enim ut, congue leo.
  Phasellus vestibulum eleifend ex, ac feugiat augue tempus a. Suspendisse potenti. Nam orci augue, ultricies id diam posuere, mattis commodo leo. Mauris aliquam velit sed purus blandit malesuada. Curabitur id est ac elit commodo vehicula. Donec nec porttitor
  nisl. Sed volutpat condimentum ante, nec mollis massa sodales in. Vestibulum aliquet fermentum porta. Morbi dapibus sodales pulvinar. Sed dapibus viverra erat, faucibus dapibus ligula luctus sed. Sed hendrerit, lectus sit amet tristique semper, ante
  urna tempor velit, non pellentesque mi metus ut nisl. Mauris fermentum ullamcorper nibh. Integer efficitur, nisl sed tincidunt pulvinar, nisi justo ultrices lectus, a sollicitudin sapien est viverra augue. Nullam sed efficitur urna. Vivamus dictum felis
  quis purus pulvinar, at fringilla leo sodales. Donec quis nisl imperdiet, tempor nibh in, condimentum ligula. Sed suscipit nisl enim, et cursus urna aliquet vitae. Sed pharetra consequat eleifend. Duis imperdiet urna id laoreet placerat. Pellentesque
  ullamcorper porttitor diam, interdum dictum massa placerat vitae. Nulla facilisi. Duis placerat accumsan neque nec tincidunt. Nunc pretium neque at posuere egestas. Sed lobortis lorem dolor, ac volutpat eros fringilla sit amet. Proin facilisis, velit
  in tincidunt blandit, est erat dapibus elit, quis tristique massa dui vitae ligula. Cras vel nulla vel arcu auctor lacinia sit amet id magna. Curabitur dapibus ultricies blandit. Sed sit amet arcu eu sapien fermentum posuere. Nullam ut scelerisque est,
  sit amet maximus orci. Curabitur nibh nibh, accumsan et justo a, aliquam
</div>

So, just adjust font-size and/or line-height and it will solve your issue.