Question

我有一个网站的一部分，我想设置一个最大高度，然后隐藏任何溢出的内容。代码如下所示：

HTML

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

CSS

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

它工作正常，但里面的内容有不同的高度，我发现内容，时不时地会出现剪裁。截图：

有没有办法解决这个问题？我更喜欢只有CSS的解决方案，但如果需要的话，我会接受JS / jQuery解决方案。

Answer 1

这实际上取决于您的line-height与font-size的比率（基于您的font-family）

请参阅此代码段，由于line-height / font-size（16px/12px）的比率为1.33％，因此不会显示（半行）

段

＆＃13;

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

＆＃13;

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

＆＃13;

现在，请使用Firefox分别使用font-size font-family和line-height的系统默认16px serif和20px来看这个代码段。给出1.25％（20px/16px）的比率，它仍然有效。

段

＆＃13;

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

＆＃13;

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

＆＃13;

因此，只需调整font-size和/或line-height即可解决您的问题。

Answer 2

根据另一个stackoverflow问题，您可以通过在脚本中插入此jQuery代码来隐藏不适合您容器的元素:(我根据您的需求量身定制 - 但您需要为容器添加一个id为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;
}
});

以下是一个示例:(第13和第14个项目因为不合适而无法展示）

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

使用overflow时隐藏剪切：隐藏;

2 个答案:

段

段