CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dr. Paul Jarvis
Dr. Paul Jarvis

Reputation: 256

Finding the text that has been hidden due to overflow:hidden?

I have a <div> block that contains an unknown amount of text.

The css for the block is:

.synopsis { width:600px; height:32px; line-height:16px; overflow:hidden; }

In essence the block allows for two lines of text, once the text reaches the block's limits, the rest is hidden from view.

What is the cleanest method to find out what text has been hidden from view? Any jQuery/Javascript functionality that does this?

Upvotes: 1

Views: 158

Answers (3)

Goje87
Goje87

Reputation: 2869

I dont think there is any easy way to obtain that in any script. The only way I can think as of now is to get the height and width of each character present in that div. You have to do certain calculations on these metrics to derive which characters fall in the visible area. This would be the most complex to do.

Upvotes: 0

James
James

Reputation: 532

If i've understood you correctly, then a simple way to find the text that's overflowed would be to add a visible background colour and comment out the overflow:hidden on your synopsis class, something along the lines of:

.synopsis {
  background: #FF0000;
  height: 32px;
  line-height: 16px;
  /*overflow: hidden;*/
  width: 600px;
}

Here a JSFiddle with what I mean: http://jsfiddle.net/UeaBA/4/

Upvotes: 0

David
David

Reputation: 432

You can remove the height from the css, or if you want to do this with jQuery you can use in something like this:

$('.synopsis').css('height','auto');

Upvotes: 0

Related Questions