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

非常

是否有可能找到小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的位置? 我喜欢填整个div133!

SmokeyPHP

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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在VBA中找到最后一个可见的列号?

来自分类Dev

如何在numpy.zeros中找到最后一个位置

来自分类Dev

如何在MainActivity中找到最后一个片段

来自分类Dev

我如何在mainActivity中找到最后一个片段

来自分类Dev

如何在熊猫数据框中找到最后一个事件的日期

来自分类Dev

如何在水豚中找到最后一个匹配的元素?

来自分类Dev

如何在lodash地图对象中找到最后一个孩子?

来自分类Dev

我没有在android中找到最后一个位置

来自分类Dev

如何在Android中找到最后一个listview项目并在其后添加动态视图?

来自分类Dev

如何在记事本中找到最后一个字符为“ A”的记录

来自分类Dev

如何在应该为空白但有空格的列中找到最后一个单元格?

来自分类Dev

如何在 Pandas Data Frame 行中找到最后一个索引并使用列信息向后计数?

来自分类Dev

在__attribute __(节)中找到最后一个变量

来自分类Dev

在html中找到最后一个活动元素

来自分类Dev

如何在“ std :: vector <char>”容器中找到一个单词

来自分类Dev

如何在cassandra中找到最后一个和第一个条目(日期是分区键的一部分)

来自分类Dev

如何在字符串中找到最后一个字母,该字符串是java中数字和字符的组合

来自分类Dev

如何找到最后一个锁的时间戳?

来自分类Dev

htaccess - 如何找到最后一个连字符

来自分类Dev

如何找到最后一个数组的键

来自分类Dev

正则表达式,在过程中找到最后一个“ end”以替换另一个单词

来自分类Dev

如何使UITableViewCell坚持到最后一个位置

来自分类Dev

填充公式向下到最后一个可见单元格

来自分类Dev

如何使用linq从列表中找到最后一个项目具有相同项目

来自分类Dev

如何通过Python在字符串中找到最后一个目标字符串?

来自分类Dev

如何使用linq从列表中找到最后一个具有相同项目的项目

来自分类Dev

PHP:在嵌套的foreach循环中找到最后一个项目?

来自分类Dev

我需要在XLS单元格中找到最后一个空格

来自分类Dev

在Excel工作表中找到最后一个单元格?

Related 相关文章

  1. 1

    如何在VBA中找到最后一个可见的列号?

  2. 2

    如何在numpy.zeros中找到最后一个位置

  3. 3

    如何在MainActivity中找到最后一个片段

  4. 4

    我如何在mainActivity中找到最后一个片段

  5. 5

    如何在熊猫数据框中找到最后一个事件的日期

  6. 6

    如何在水豚中找到最后一个匹配的元素?

  7. 7

    如何在lodash地图对象中找到最后一个孩子?

  8. 8

    我没有在android中找到最后一个位置

  9. 9

    如何在Android中找到最后一个listview项目并在其后添加动态视图?

  10. 10

    如何在记事本中找到最后一个字符为“ A”的记录

  11. 11

    如何在应该为空白但有空格的列中找到最后一个单元格?

  12. 12

    如何在 Pandas Data Frame 行中找到最后一个索引并使用列信息向后计数?

  13. 13

    在__attribute __(节)中找到最后一个变量

  14. 14

    在html中找到最后一个活动元素

  15. 15

    如何在“ std :: vector <char>”容器中找到一个单词

  16. 16

    如何在cassandra中找到最后一个和第一个条目(日期是分区键的一部分)

  17. 17

    如何在字符串中找到最后一个字母,该字符串是java中数字和字符的组合

  18. 18

    如何找到最后一个锁的时间戳?

  19. 19

    htaccess - 如何找到最后一个连字符

  20. 20

    如何找到最后一个数组的键

  21. 21

    正则表达式,在过程中找到最后一个“ end”以替换另一个单词

  22. 22

    如何使UITableViewCell坚持到最后一个位置

  23. 23

    填充公式向下到最后一个可见单元格

  24. 24

    如何使用linq从列表中找到最后一个项目具有相同项目

  25. 25

    如何通过Python在字符串中找到最后一个目标字符串?

  26. 26

    如何使用linq从列表中找到最后一个具有相同项目的项目

  27. 27

    PHP:在嵌套的foreach循环中找到最后一个项目?

  28. 28

    我需要在XLS单元格中找到最后一个空格

  29. 29

    在Excel工作表中找到最后一个单元格?

热门标签

归档