How do I fully cut off list elements of unknown height partially hidden by overflow:hidden

Question

I have some javascript pulling status updates from a twitter feed, and a div element with a set height set to overflow:hidden . The problem is that that hidden doesn't completely cut off a list element, but cuts literally where the height stops.

How can I remove the entire li element? I never know the height of each list element because the size of the twitter status varies.

This code spits out an unordered list with list elements of undefined height:
... EDIT:

Here's the majority of the code. The $param variables are user inputs.

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

Two things. For the most part it was working. Within the li element the twitter script generates a span element and an anchor. If it cut off at the span, it would remove the entire list element, but not if it cut off at the anchor, then it would show that. Now, however, it's late at night and I must've done something cause the feed itself isn't working. Is this the most efficient way of doing things

Answer 1

Since you're already populating the div with javascript, you can check if its scrollHeight is greater than the height . If it is, remove list items from the bottom until scrollHeight <= height .