知道什么溢出：隐藏已隐藏 [英] Know what overflow:hidden has hidden

问题描述

我想知道是否有任何方法可以调用并使用 overflow：hidden 有很好的隐藏。

要澄清我的意思，请在此示例中，我想知道这是隐藏的是div的隐藏部分。

这是可能吗？

我已经标记了jQuery的问题，但是当然，任何获得的工作都是伟大的，纯CSS或Javascript会做得很好。 p>

提前感谢！

解决方案

尝试：

CSS：

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

HTML：

 < div class =text>这是隐藏的< / div> 
 
< div id =result>< / div> 
 
< div id =containerstyle =visibility：hidden;>< / div> 
  

JS：

  $（< span />\").text($(\".text\").textayment()).appendTo(\"#container）; 
 
 $（＃result）。append（< span>+ $（。text）。width（）+< / span>< br / ）; 
 $（＃result）。append（< span>+ $（＃container span）。width（）+< / span>< br / 
 
 $（＃result）。append（< span> Overflow：+（（$（＃container span））width（）> $（。 .width（））？yes：no）+< / span>< br / 
  

示例

编辑

：

在此插件上

新示例

CSS：

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

HTML：

 < br /> 
< br /> 
< div class =textid =test1>这显示。这是隐藏的< / div> 
< div class =textid =test2>无隐藏< / 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）？ no）+< / span>< br />）; 
 
 $（＃result）。append（< span> Text Overflow：+ $（＃test1）[0] .overflow_text.texOverflow +< / span> br />）; 
 
 $（＃test2）。noOverflow（）; 
 
 $（＃result）。append（< br />< span>测试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 / ）; 
  

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!

解决方案

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

这篇关于知道什么溢出：隐藏已隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！