我想知道是否有任何方法可以调用和使用 overflow:hidden
隐藏得很好的东西。
为了阐明我的意思,在 this example我想知道“This is hidden”是div的隐藏部分。
这可能吗?您将如何处理它?</p>
我已经标记了 jQuery 问题,但当然无论完成什么工作都很棒,纯 CSS 或 Javascript 就可以了。
提前致谢!
最佳答案
试试这个:
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 />");
编辑
试试这个:
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 />");
关于jquery - 知道什么溢出:hidden has hidden,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4934807/