Reputation: 135
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>"));
Upvotes: 0
Views: 97
Reputation: 769
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>
Upvotes: 1