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

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可能会缩短，但是我在写和思考的同时就把它留了下来……本质上，您将所有单词都包裹在一个范围内，然后向后循环遍历这些范围，看看它们的界限是否在范围内容器，一旦我们发现一个跨度确实位于容器的边界之内，请在将文本返回为纯文本（删除临时跨度）之后，跳出循环并返回该单词。