使用 overflow:hidden 时避免剪裁；
Avoid Clipping when using overflow:hidden;
我有一个网站部分，我想设置一个最大高度，然后隐藏任何溢出的内容。代码如下所示：
HTML
<div class="blog-list">
<!-- CONTENT -->
</div>
CSS
.blog-list{
max-height: 243px;
overflow: hidden;
}
它工作正常，但内部内容的高度可变，我发现该内容时不时会出现剪裁。截图：
有没有办法解决这个问题？我更喜欢仅 CSS 的解决方案，但如果需要的话，我会接受 JS/jQuery 的解决方案。
这实际上完全取决于您的 line-height 与 font-size 的比率（基于您的 font-family）
例如查看此代码段，由于 line-height / font-size (16px/12px)[= 的比率为 1.33%，因此它不会显示（半行） 29=]
片段
.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>
现在使用 Firefox 查看系统默认值 font-size font-family 和 line-height 的代码段，它们分别是 16px serif 和 20px。给出 1.25% 的比率 (20px/16px)，它仍然有效。
片段
.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>
所以，只需调整 font-size and/or line-height 即可解决您的问题。
根据另一个 Whosebug 问题，您可以通过在脚本中插入此 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>
我有一个网站部分，我想设置一个最大高度，然后隐藏任何溢出的内容。代码如下所示：
HTML
<div class="blog-list">
<!-- CONTENT -->
</div>
CSS
.blog-list{
max-height: 243px;
overflow: hidden;
}
它工作正常，但内部内容的高度可变，我发现该内容时不时会出现剪裁。截图：
有没有办法解决这个问题？我更喜欢仅 CSS 的解决方案，但如果需要的话，我会接受 JS/jQuery 的解决方案。
这实际上完全取决于您的 line-height 与 font-size 的比率（基于您的 font-family）
例如查看此代码段，由于 line-height / font-size (16px/12px)[= 的比率为 1.33%，因此它不会显示（半行） 29=]
片段
.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>
现在使用 Firefox 查看系统默认值 font-size font-family 和 line-height 的代码段，它们分别是 16px serif 和 20px。给出 1.25% 的比率 (20px/16px)，它仍然有效。
片段
.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>
所以，只需调整 font-size and/or line-height 即可解决您的问题。
根据另一个 Whosebug 问题，您可以通过在脚本中插入此 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>