javascript - 如何找到文本容器中最后一个可见单词的位置？

Question

是否可以找到小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的位置？

Answer 1

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 可能会被缩短，但我在写作和思考的同时离开了它......本质上，你将所有单词包装在一个跨度中，然后通过跨度向后循环，看看它们是否边界落在容器内，一旦我们找到位于容器边界内的跨度，在将文本返回纯文本(删除临时跨度)后，跳出循环并返回该词。