如何在文本容器中查找最后一个可见的单词位置？ [英] How to find the last visible word position in a text container?

问题描述

对于exampel：

是否有可能找到文本中最后一个可见单词的位置（overflow：hidden）？ >

 < 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。在vero eos et b $ b 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 here： 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。在vero eos et b $ b 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（）; 
休息; 
} 
} 
 cntnr.html（cntnr.text（））; 
 alert（lastw）; 
  

JS可能会缩短，但我在编写&在同一时间思考......实质上，你将所有单词放在一个跨度中，然后向后循环遍历跨度，查看它们的边界是否落入容器内，并且只要我们发现一个跨度位于容器边界内，将文本返回纯文本（删除临时跨度）后，跳出循环并返回该单词。

Is it possible to find the position of the last visible word of a text(overflow:hidden) shown in a small div?

For exampel:

<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>

How to calculate the position of the last visible Word in the div container?

解决方案

JSFiddle here: 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);

The JS could probably be shortened, but I've left it as I was writing & thinking at the same time... In essence, you wrap all words in a span, then loop backwards through the spans, see if their bounds fall within the container, and as soon as we find a span that does sit inside the container's boundaries, break out of the loop and return that word, after returning the text back to plain text (removing the temporary spans).

这篇关于如何在文本容器中查找最后一个可见的单词位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！