How to find the last visible position of a word in a text container?

Question

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

For instance:

<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 a div container?

Answer 1

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

JS can probably be shortened, but I left it as I was writing and thinking at the same time ... Basically, you wrap all the words in the gap, then go back through the spaces, you see, the borders fall into the container, and how only we will find that the gap that sits inside the boundaries of the container breaks out of the loop and returns this word, after returning the text back to plain text (deleting time intervals).

Answer 2

Yes, you can define the last word that is displayed using Javascript.

Unfortunately, I don’t have time to write code that can do this, however I will explain the algorithm.

If you have a 50x50 field and you want to determine what the last visible word is, do the following:

• Create a div from the screen, which is 50 pixels wide but without height restrictions. For this demonstration, we will call it div clonedDiv.
• Get the line that was in the original div, and insert the first word from it into clonedDiv.
• Check the height of the clonedDiv.
• Apply this logic: if it is <= 50px, add the following word and try again. If it is larger than 50px high, then this is the word causing the overflow. Your answer will be the PREVIOUS word.

Note that the algorithm above uses brute force to find the word. The algorithm basically adds one word at a time until it finds a word that causes an overflow. You can improve this by using a variant of the binary search algorithm that will improve the algorithm from O (n) to O (log (n)).

Answer 3

Working demo

I borrowed the answer here and slightly changed it.

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

Answer 4

One possible solution:

 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('<span />'); 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); 

DEMO: http://jsfiddle.net/bcn78/

Answer 5

In addition to @SmokeyPhp, the answer is:

First of all, it was a great answer, which helped me a lot, but there were some mistakes.

Secondly, I work with the jqlite library instead of jQuery, so the answer was also very useful in this area (all the methods that he used were part of the jqlite library).

Besides detecting the last visible word in a range or div, my function also replaces the rest of the text with "...".

I am posting the code I'm using, basically the @SmokeyPhp code is posted, but fixed where necessary, and I hope others will benefit from it:

 function dotdotdot(containersToDotdotdot) { function dotdotdotContainers(containers) { for (var i = 0; i < containers.length; i++) { var cntnr = $jq(containers[i]); 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 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)); } } 

As you can see, my dotdotdot function can get an array of classes / identifiers for dotdotdot or a single class / id.

$ jq - jqlite replacement for jQuery $.

Thanks @SmokeyPhp, I have been looking for a method for a long time that does not require jQuery for dotdotdot text, and your method is fantastic.

Answer 6

Hi ur works as below ...

 function Searchinput() { var str = "This is a test "; // Content of the div var lastWord = str.substr(str.trim().lastIndexOf(" ")+1); alert(lastWord) } 

http://jsbin.com/UWUTar/1/edit