How can I access the actual text that is displayed in a DIV when using CSS style overflow: hidden?

Question

I have the following content DIV on my page, which displays dynamic text:

It uses the following

Answer 1

There is no need to use Javascript to have the ellipsis. You can simply use the CSS text-overflow property and set its value to "ellipsis". You see the documentation here.

And if you want to have it after multiple lines, then advise this guide.

Answer 2

I don't think what you're asking to do is possible with javascript.

Alternatively, why not truncate the text at a specific character count server-side? You probably won't have the kind of control you want over the size of the div displayed on the page depending on the font you've selected but it should solve your problem.

Edit:

Take a look at this to get automatic CSS ellipsis. There are a few caveats and it looks pretty browser-specific but this is another method of doing what you want.

Answer 3

You could do the same truncation based on character count on the client side. Store the truncated part in some other DOM element (or your own attribute if you don't mind that sort of thing). Have the whole thing set to kick off on body.onLoad().

Answer 4

This site explains a technique that may be useful for getting the displayed portion of text. I'm not sure how accurate this method would be, but I suspect it'd get you pretty close to what you want: http://www.ruzee.com/blog/2007/08/ellipsis-or-truncate-with-dots-via-javascript

Answer 5

Here's a quick thought using jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var innerText = $('#someContent').text();
    var textArray = innerText.split('');
    var formatted = '';
    for(var i in textArray) {
        formatted += '<span>' + textArray[i] + '</span>';
    }
    var heightOfContainer = $('#someContent').height();
    $('#someContent').html(formatted);
    var clipped = '';
    $('#someContent span').each(function(){
        if ($(this).position().top < heightOfContainer) {
            clipped += $(this).text();
        } else {
            return false;
        }
    });
    clipped += '...';
    $('#someContent').html(clipped);
});
</script>

Answer 6

There's no easy way to do it. You have to calculate how much text can be visible in the DIV based on div size, font size, font type and text offset inside div. Remember you can use negative offset to show different parts from the text.

You should be able to figure out the algorythm to calculate how much of your text the DIV can hold based on all of those numbers, but it's a bit tricky because of linewrap.