How to make this JS function work for each div

Question

I want to replace last visible word with span of each div.

I used following code. It works but only for first div & it messes up all next div. Here is jsfiddle: http://jsfiddle.net/samarpw/yfthoa5j/

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

$('.txt').html($('.txt').html().replace(word, "<span class='red'>"+word+"</span>"));

Answer 1

This jQuery Example might be helpful..

 jQuery(document).ready(function($) { $('.txt').each(function(index, el) { // Text Container Selector var $txt = $(this); // Selector Current Top Position var txtPos = $txt.offset().top; // Selector Height var size = $txt.innerHeight(); // Get Words Array from String var txt_str = $txt.text().split(' '); // Make Emplty Selector's content $txt.html(' '); // Default Value of Last Word Index var last_word_index = 0; // Loop throught Each Word Araay Element $.each(txt_str, function(index, el) { // Wrap Each Word with <span> tag to Compare Top Position Selector $txt.append('<span>'+this+' </span>'); // Currently appended <span> tag Index var $txtSpan = $txt.find('span').eq(index); // Currently appended <span> tag Top Position var txtSpanPos = $txtSpan.offset().top; // Currently appended <span> tag Height var txtSpansize = $txtSpan.innerHeight(); // Comparing currently appended <span> tag position with Selector and Getting First not visible character if (txtSpanPos >= txtPos+size-(txtSpansize/1.5) && last_word_index <= 0) { // Getting previous <span> tag index of not visible Word last_word_index = index - 1; } }); // Declare new string variable var new_str = ''; // Loop throught Each Word Araay Element $.each(txt_str, function(index, el) { var new_word = this; // New String Last word is wrapped with Span if all words are visible if (last_word_index == 0) { last_word_index = txt_str.length-1; } // Only last visible word is wrapped with Span if (index == last_word_index) { new_word = '<span class="red">'+new_word+'</span>'; } new_str += new_word+' '; }); // Adding all new string in Selector $txt.html(new_str); }); }); 

 .txt{ width: 60px; height: 80px; overflow: hidden; } .red { color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="txt">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</div> <br> <div class="txt">this is great to test if it is working.</div> <br> <div class="txt">Another example to test code working or not.</div>