Prevent HTML Browser from Clipping Text & Showing 1/2 a Text Line

Question

Let's say my browser window is 105 pixels high and I show a text block where each line of text is 10 pixels high - the browser will show me 10 and 1/2 lines in the window (i.e. The bottom line will be clipped vertically).

Is there some way to prevent this behavior and see only 10 lines?

The reason I want to do this is that I am using a HTML widget (UIWebView) to render a book that will be displayed with a page-flipping paradigm.

note: It looks like @page rules are supposed to help me accomplish this but they only seem to apply when printing to a printer.

Answer 1

The solutions listed so far seem to all leave the text cut off half way. With some fancy Javascript you can have the browser figure out where to stick some ellipses and truncate your text. This will look snappy at the expense of being surprisingly difficult to program. We discussed this at length in this post.

If you can use jQuery, you could accomplish it with my jQuery function there thusly:

<div id="my_div">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Etiam vitae lorem eu ipsum fringilla rhoncus.
</div>
<script>
  $("#my_div").truncateToHeight($("#my_div").text(), 105);
</script>