Question

我正在输出<li>个元素的列表，我想在overflow:hidden上应用<ul>，因此，如果<li>不适合，则会隐藏完全，不仅仅是其中的一部分。

这是我的清单：

<ul style="height: 500px; overflow:hidden;">
  <li>Some big text goes here</li>
  <li>Some big text goes here</li>
  <li>Some big text goes here</li>
  <li>Some big text goes here</li>
</ul>

是否可以使用纯CSS + HTML进行操作？

Answer 1

它只能用于两个要求（纯CSS中的）..

li元素不包含其内容（使用white-space:nowrap; ）
height的{{1}}是ul

line-height

演示 http://jsfiddle.net/A36fN/

或者你可以编写一些javascript来检测溢出并隐藏需要的元素..

Answer 2

我认为您的问题没有任何纯css 解决方案。

您必须使用javascript来实现您的目标。您需要做的是计算容器的高度，然后计算所有子元素的高度，如果它们不适合，设置最后一个元素display:none

看看this

Answer 3

不幸的是，纯HTML + CSS无法实现这一点。

例如，如果我连续有5个<li>，并且font-size为16px，行高为20px，那么我需要设置{{1高度为5 * 20，以完整显示每个<ul>。这可以正常工作，直到有人在浏览器中增加字体大小，或者其中一个<li>超过两行。

Example of working fine（注意第6个li没有显示。）

Example of not working

CSS - 为整个<li> </li>隐藏的溢出

3 个答案: