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 />");