如何在文本容器中找到最后一个可见的单词位置？
是否有可能找到一个小div中显示的文本的最后一个可见单词的位置（溢出：隐藏）？
例如：
如何计算div容器中最后一个可见Word的位置？ 
JSFiddle： http ： //jsfiddle.net/SmokeyPHP/NQLcc/1/
HTML：
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.
CSS：
#txt { width: 75px; height: 75px; border: 1px solid #F00; overflow: hidden; }
JS：
var cntnr = $("#txt"); cntnr.html(''+cntnr.html().replace(/ /g,' ')+'') var words = Array.prototype.slice.call(cntnr.find("span"),0).reverse(); var lastw = null; for(var i=0,c=words.length;i
JS可能会被缩短，但我已经离开了它，因为我在同时写作和思考......本质上，你将所有单词包裹在一个跨度中，然后在跨度中向后循环，看看它们的界限是否在容器，一旦我们找到一个确实位于容器边界内的跨度，在将文本返回到纯文本（删除临时跨度）之后，突破循环并返回该单词。
是的，可以使用Javascript检测正在显示的最后一个单词。
不幸的是，我没有时间编写可以执行此操作的代码，但是，我将解释算法。
如果您有一个50×50的框，并且想要检测最后一个可见单词是什么，请执行以下操作：
- 创建一个div宽屏，其宽度为50像素，但不限制高度。 对于此演示，我们将此div称为clonedDiv。
- 获取原始div中的字符串，并在clonedDiv中插入它的第一个单词。
- 检查clonedDiv的高度。
- 应用此逻辑：如果<= 50px，则添加下一个单词，然后重试。 如果它高于50px高，那么这就是导致溢出发生的词。 你的答案将是上一个词。
请注意，上述算法使用powershell方法查找单词。 该算法基本上一次添加一个字，直到找到导致溢出的字。 您可以通过使用二进制搜索算法的变体来改进这一点，这将改进算法从O（n）到O（log（n））。
一种可能的方案：
var $div = $('div'), size = [$div.width(), $div.height()], words = $.trim($div.text()).split(/\s+/), word; for (var i = 0, len = words.length; i < len; i++) { var $clone = $div.clone().text(words.join(' ')).insertAfter($div); $clone.contents().wrap(''); var $child = $clone.children('span'); if ($child.width() <= size[0] && $child.height() <= size[1]) { word = words.pop(); $clone.remove(); break; } words.pop(); $clone.remove(); } console.log(word);
演示： http ： //jsfiddle.net/bcn78/
工作演示
从这里借了一个答案并稍微调整一下。
function countVisibleCharacters(element) { var text = element.firstChild.nodeValue; var r = 0; element.removeChild(element.firstChild); for(var i = 0; i < text.length; i++) { var newNode = document.createElement('span'); newNode.appendChild(document.createTextNode(text.charAt(i))); element.appendChild(newNode); if(newNode.offsetLeft < element.offsetWidth) { r++; } } return r; } var c = countVisibleCharacters(document.getElementsByTagName('div')[0]); var str = document.getElementById('myDiv'); str = str.textContent; str = str.substring(0, c); str = str.substr(str.trim().lastIndexOf(" ")+1); alert(str);
除了@SmokeyPhp答案：
首先，这是一个很好的答案，对我有很大帮助，但那里的情况有些错误。
第二，我正在使用jqlite库而不是jQuery，因此答案在该领域也非常有用（他使用的所有方法都是jqlite库的一部分）。
除了检测span或div中的最后一个可见单词之外，我的函数还用“…”替换文本的其余部分。
我发布了我正在使用的代码，基本上是代码@SmokeyPhp发布的，但修复了需要的地方，我希望其他人也能从中受益：
function dotdotdot(containersToDotdotdot) { function dotdotdotContainers(containers) { for (var i = 0; i < containers.length; i++) { var cntnr = $jq(containers[i]); cntnr.html('' + cntnr.html().replace(/ /g,' ') + ''); var words = Array.prototype.slice.call(cntnr.find("span"), 0).reverse(); var lastw = null; for (var j = 0; j < words.length; j++) { var w = $jq(words[j]); var wbot = w.height() + w.offset().top; var wleft = w.offset().left; var wright = wleft + w.width(); if (wbot <= (cntnr.offset().top + cntnr.height()) && wleft >= (cntnr.offset().left) && wright <= (cntnr.offset().left + cntnr.width())) { lastw = words.length - j - 1; break; } } cntnr.html(lastw === null || lastw === (words.length - 1) ? cntnr.text() : (cntnr.text().split(' ').slice(0, lastw).join(' ') + '...')); } } if (containersToDotdotdot instanceof Array) { for (var i = 0; i < containersToDotdotdot.length; i++) { dotdotdotContainers($jq(containersToDotdotdot[i])); } } else { dotdotdotContainers($jq(containersToDotdotdot)); } }
如您所见，我的dotdotdot函数可以获取dotdotdot的类/ ID数组，或单个类/ id。
$ jq是jQuery的$的jqlite替代品。
谢谢@SmokeyPhp，我找了很长时间来寻找一个不需要jQuery到dotdotdot文本的方法，而且你的方法太棒了。
嗨，你的工作完成如下……
function Searchinput() { var str = "This is a test "; // Content of the div var lastWord = str.substr(str.trim().lastIndexOf(" ")+1); alert(lastWord) }