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 to know that "This is hidden" is the hidden part of the div.

Is this even possible? How would you approach it?

I've tagged the question jQuery but of course whatever gets the job done is great, pure CSS or Javascript will do just fine.

Thanks in advance!

Answer 1

Try this:

CSS:

.text{


    outline:1px solid orange;

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

}

HTML:

<div class="text">This is shown. This is hidden</div>

<div id="result"></div>

<div id="container" style="visibility:hidden;"></div>

JS:

$("<span />").text($(".text").text()).appendTo("#container"); 

$("#result").append("<span>"+$(".text").width()+"</span><br />");
$("#result").append("<span>"+$("#container span").width()+"</span><br />");

$("#result").append("<span>Overflow: "+ (($("#container span").width() > $(".text").width()) ? "yes" : "no")+"</span><br />");

Example

EDIT

Try this:

based on this plugin

New Example

CSS:

.text{
    outline:1px solid orange;
    width:100px;
    height:20px;
    overflow:hidden;
}

HTML:

<br/>
<br/>
<div class="text" id="test1">This is shown. This is hidden</div>
<div class="text" id="test2">No hidden</div>
<br/>
<br/>
<div id="result"></div>

JS:

(function($) {

    $.fn.noOverflow = function(){

        return this.each(function() {

            var el = $(this);

            var originalText = el.text();
            var w = el.width();

            var t = $(this.cloneNode(true)).hide().css({
                'position': 'absolute',
                'width': 'auto',
                'overflow': 'visible',
                'max-width': 'inherit'
            });
            el.after(t);

            var text = originalText;
            while(text.length > 0 && t.width() > el.width()){
                text = text.substr(0, text.length - 1);
                t.text(text + "");
            }
            el.text(t.text());

            /*
            var oldW = el.width();
            setInterval(function(){
                if(el.width() != oldW){
                    oldW = el.width();
                    el.html(originalText);
                    el.ellipsis();
                }
            }, 200);
            */

            this["overflow_text"] = {
                hasOverflow: originalText != el.text() ? true : false,
                texOverflow: originalText.substr(el.text().length)
            };

            t.remove();

        });

    };

})(jQuery);

$("#test1").noOverflow();

$("#result").append("<span>Test 1</span><br />");

$("#result").append("<span>Has Overflow: "+ (($("#test1")[0].overflow_text.hasOverflow) ? "yes" : "no")+"</span><br />");

$("#result").append("<span>Text Overflow: "+ $("#test1")[0].overflow_text.texOverflow+"</span><br />");

$("#test2").noOverflow();

$("#result").append("<br /><span>Test 2</span><br />");
$("#result").append("<span>Has Overflow: "+ (($("#test2")[0].overflow_text.hasOverflow) ? "yes" : "no")+"</span><br />");
$("#result").append("<span>Text Overflow: "+ $("#test2")[0].overflow_text.texOverflow+"</span><br />");

Answer 2

Here's my solution (using jQuery).

Markup:

<div class="text">This is shown. This is hidden</div>

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('<div/>');
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.

Answer 3

This can give an estimate of the hidden text in the particular case in which the text in the div can wrap.

 <div class="text"><div id="inner">This is shown. This is hidden</div></div>

add to the .text css class:

 line-height: 20px;

At runtime, you can use the .height() jquery function to get the computed height of the inner div. Dividing it by the line-height, you can get the number of lines to which the text has been wrapped, with only the first being shown. Then you can guess the last word being shown/not shown and substring your text there.

var text = $("#inner").html();
var height = $("#inner").height();
var lineheight = $("div.text").height();
var rows = Math.round(height / lineheight);
alert("computed inner height: "
    + $("#inner").height()
    + " | rows: " + rows);
alert("Hidden text: "
    + text.substring(
        text.indexOf(" ",Math.round(text.length / rows))));

Answer 4

Try this solution using jQuery

JQuery

$t = $('#text');

var shown, all, hiddenWidth;

// we start with the shown width set (via css) at 100px
shown = $t.width();

// we change the css to overflow:visible, float:left, and width:auto
$t.css({'overflow': 'visible', 'float': 'left', 'width': 'auto'});

// and get the total width of the text
all = $t.width();

// then we set the css back to the way it was
$t.css({'overflow': 'hidden', 'float': '', 'width': '100px'});

// and retrieve the hiddenWidth
hiddenWidth = all - shown;

HTML

<div id="text">This is shown. This is hidden</div>   

CSS

#text{
    outline:1px solid orange;
    width:100px;
    height:20px;
    overflow:hidden;
}