ansaurus

Question

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

Answer 1

A:

Unfortunately, cannot post comments! 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 thier entirity, placed onto the following page?

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

Jim Grant 2010-08-31 21:08:11

Answer 2

A:

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

Dick Savagewood 2010-09-03 10:22:50

Answer 3

+1 A:

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>

Dave Aaron Smith 2010-09-03 22:33:32

Answer 4

A:

Can you make the line-height shorter in CSS so that it each line is shorter?

Onion 2010-09-04 17:29:57

Answer 5

A:

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.

Tgr 2010-09-04 18:14:14

ansaurus

tags:

views:

answers:

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

related questions