html - Avoid Clipping when using overflow:hidden; -

i have section of site want set max-height , hide content overflows. code looks this:

html

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

css

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

it works fine content inside has variable heights , i'm finding content, every , then, appear clipped. screenshot:

is there way solve problem? prefer css solution accept js/jquery solution, if required.

it depends on ratio of line-height font-size (based on font-family)

see snippet instances, won't show (half-lines) due 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, sollicitudin sapien est viverra augue. nullam sed efficitur urna. vivamus dictum felis quis purus pulvinar, @ 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 @ 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, sollicitudin sapien est viverra augue. nullam sed efficitur urna. vivamus dictum felis quis purus pulvinar, @ 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 @ 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, sollicitudin sapien est viverra    augue. nullam sed efficitur urna. vivamus dictum felis quis purus pulvinar, @ 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 @ 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, sollicitudin sapien est viverra augue. nullam sed efficitur urna. vivamus dictum felis    quis purus pulvinar, @ 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 @ 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 snippet system default font-size font-family , line-height using firefox 16px serif , 20px respectively. giving ratio of 1.25% (20px/16px) , 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, sollicitudin sapien est viverra augue. nullam sed efficitur urna. vivamus dictum felis quis purus pulvinar, @ 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 @ 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, sollicitudin sapien est viverra augue. nullam sed efficitur urna. vivamus dictum felis quis purus pulvinar, @ 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 @ 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, sollicitudin sapien est viverra    augue. nullam sed efficitur urna. vivamus dictum felis quis purus pulvinar, @ 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 @ 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, sollicitudin sapien est viverra augue. nullam sed efficitur urna. vivamus dictum felis    quis purus pulvinar, @ 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 @ 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, adjust font-size and/or line-height , solve issue.