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

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.

Answers


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>

You can use the meta tag

<head>
<meta name=viewport content="user-scalable=no,width=device-width,height=100px" />
</head>

Or you can put the text into a stylized div tag that looks like:

<div style="height:100px;text-overflow:hidden;overflow:ellipsis">
text....
</head>

All in all you would need some major javascript if you wanted to make the text scrollable or view the rest of the content


You could probably do it with CSS3 multicolumn trickery (seting the first column to be exactly as high and wide as the screen), but that is not supported by IE, so you will have to use Javascript to achieve it anyway.


I'm guessing that you don't know how many lines you are going to display when you come to display them in the allocated box/space. Also, you want any lines that may not be seen in their entirety placed onto the following page?

I'm sure this isn't achievable in pure CSS, but it would probably be possible using jQuery and an off-page hidden DIV. Basically set the hidden DIV to the desired width, populate, and check the height using jQuery. If it's too tall, truncate the text and try again.


Need Your Help

Mutually exclusive groups of arguments?

python argparse

I have a single Python file which includes unit tests in the source code. It works like this:

Avoid jvm capturing SEGV and hs_err_pid generation

java linux coredump

I have a jni lib that crashes on a certain point. What I get is a hs_err_pid file with