html - 如何完全切断因溢出 :hidden 部分隐藏的未知高度的列表元素

Question

我有一些 javascript 从 Twitter 提要中提取状态更新，还有一个 div 元素，其高度设置为 overflow:hidden。问题是 hidden 并没有完全切断列表元素，而是从字面上切断了高度停止的地方。

如何删除整个 li 元素？我永远不知道每个列表元素的高度，因为 Twitter 状态的大小各不相同。

此代码吐出一个无序列表，其中列表元素的高度未定义:
... 编辑:

这是大部分代码。 $param 变量是用户输入。

<style type="text/css">
<!--
#twitterbox { border: 1.5px $paramborder $parambordercolor; width: $paramwidth; height: $paramheight; overflow: hidden; display: block; }
#twitter_update_list { padding-left: 30px; list-style-image:url(local/smalltwitter.png);}
#twitter_update_list li { word-wrap: break-word; margin-right: 10px; }
#twitter_update_list li a { display: block; text-align: right;}
#twitter_update_list li span a { display: inline; text-align: left;}
-->
</style>

<div id="twitterbox">
<div class="tabletitle" id="twittertitle" style="width:100%">$paramheader</div>
<div id="twitter_div">
<ul id="twitter_update_list"></ul>
</div>
<script type="text/javascript" src="https://twitter.com/javascripts/blogger.js">
</script>
<script type="text/javascript"
src="https://twitter.com/statuses/user_timeline/$generalUtil.urlEncode("$paramuser").concat(".json?callback=twitterCallback2&amp;count=$paramcount")">
</script>
</div>

<script type="text/javascript">
var list = document.getElementById("twitter_update_list");
var sHeight = list.scrollHeight;
var dHeight = document.getElementById("twitterbox").offsetHeight;
var titleHeight = document.getElementById("twittertitle").offsetHeight;

while (sHeight > dHeight-titleHeight) {
  list.removeChild(list.lastChild);
  sHeight =  list.scrollHeight;
}
</script>

两件事。在大多数情况下，它是有效的。在 li 元素中，twitter 脚本生成一个 span 元素和一个 anchor 。如果它在跨度处切断，它将删除整个列表元素，但如果它在 anchor 处切断则不会，然后它会显示出来。然而，现在已经是深夜了，我一定是做了什么导致 Feed 本身无法正常工作。这是最有效的做事方式吗

Answer 1

因为你已经用 javascript 填充了 div，你可以检查它是否是 scrollHeight 大于 height .如果是，从底部删除列表项直到 scrollHeight <= height .