是否有可能找到小div中显示的文本(溢出:隐藏)的最后一个可见单词的位置?
例如:
<div style="height: 50px; width: 50px; overflow: hidden;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</div>
如何计算div容器中最后一个可见Word的位置?
JSFiddle在这里:http : //jsfiddle.net/SmokeyPHP/NQLcc/1/
HTML:
<div id="txt">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</div>
CSS:
#txt {
width: 75px;
height: 75px;
border: 1px solid #F00;
overflow: hidden;
}
JS:
var cntnr = $("#txt");
cntnr.html('<span>'+cntnr.html().replace(/ /g,'</span> <span>')+'</span>')
var words = Array.prototype.slice.call(cntnr.find("span"),0).reverse();
var lastw = null;
for(var i=0,c=words.length;i<c;i++)
{
var w = $(words[i]);
var wbot = w.height() + w.offset().top;
var wleft = w.offset().left;
var wright = wleft+w.width();
if(wbot <= cntnr.height() && wleft <= cntnr.width() && wright <= cntnr.width())
{
lastw = w.text();
break;
}
}
cntnr.html(cntnr.text());
alert(lastw);
JS可能会缩短,但是我在写和思考的同时就把它留了下来……本质上,您将所有单词都包裹在一个范围内,然后向后循环遍历这些范围,看看它们的界限是否在范围内容器,并且一旦我们发现一个跨度确实位于容器的边界之内,请在将文本返回为纯文本(删除临时跨度)之后,跳出循环并返回该单词。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句