使用溢出时避免剪切：

L84 发表于 Dev

L84

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

的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％，因此不会显示（半行）

片段

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

现在font-size font-family，line-height使用系统默认值16px serif和20px分别使用和的Firefox查看此代码段。给出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>