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

Asked 29/8, 2010 at 8:10 Answered 4/9, 2010 at 18:14

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.

Sherlock answered 29/8, 2010 at 8:10 Comment(3)

I may be mistaken, but what's stopping you from simply wrapping the whole thing in a div, with a fixed height rounded down to the last line, and giving it overflow: hidden? – Donoghue 29/8, 2010 at 8:30

You could use JavaScript to get the viewport height, then calculate and set needed line height. I am unaware of solution using only CSS. – Raeannraeburn 29/8, 2010 at 14:42

Can you make the line-height shorter in CSS so that it each line is shorter? – While 29/1, 2013 at 22:24

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>

Abercromby answered 3/9, 2010 at 22:33 Comment(0)

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.

Merrifield answered 31/8, 2010 at 21:8 Comment(0)

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

Ponceau answered 3/9, 2010 at 10:22 Comment(0)

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.

Taro answered 4/9, 2010 at 18:14 Comment(0)

Recommended topics

Hot tags