Know what overflow:hidden has hidden

Question

I want to know if there is any way you can call and use what the overflow:hidden has well hidden.

To clarify what I mean, in this example I would like t

Answer 1

Here's my solution (using jQuery).

Markup:

This is shown. This is hidden

CSS:

.text{


    outline:1px solid orange;

    width:200px;
    height:20px;
    overflow:hidden;

}

(Only the overflow: hidden actually matters, the code will still work with different values for height and width.)

JS:

$('.text').wrapInner('
');
var originaltext = $('.text div').text();

var t = $('.text div').text();

while(true)
{
    if ($('.text div').height() <= $('.text').height()) { break; }

    $('.text div').text(t.substring(0, t.lastIndexOf(" ")));
    t = $('.text div').text();
}

$('.text div').text(originaltext);

alert("shown: " + originaltext.substring(0, t.length));
alert("hidden: " + originaltext.substring(t.length));

Here's what it's doing:

We save the original text into a variable so we can restore it later.

We then remove one word at a time, until the inner div has decreased to the same height as the container (with overflow hidden). Everything still in the div was visible and everything that we had to remove was hidden.

Limitations

My solution assumes the div contains text only. It will mostly work with inline elements like spans, but currently strips them out during the process. It could easily be fixed to preserve spans, but coping with images or other complications like positioned elements is a lot more involved.