My approach offers a quick solution, and understanding the process can lead to solving the problem.
I have devised 2 methods: one for counting line numbers and the other for returning text on a specific line based on the given lineNumber.
In this method, if the line counter exceeds 2, I extract the first 2 lines of text, create a new template, and append it to the container.
Check out my Fiddle
$( document ).ready(function() {
function countLines() {
var divHeight = parseInt( $(".maxTwoLine").height() );
var lineHeight = parseInt($('.maxTwoLine').css('line-height'));
return divHeight/lineHeight;
}
function GetTextLine(lineNumber){
var lines = $('.maxTwoLine').text().split(' ');
console.log(lines);
for(var i = 0;i < lines.length;i++){
if(i === lineNumber)
{
return lines[i];
}
}
}
$(".clickB").click(function(){
var lineCounter = countLines();
if(lineCounter>1)
{
var allText = $('.maxTwoLine').text();
var firstLineText = GetTextLine(0);
var secondLineText = GetTextLine(1);
var template = firstLineText + '<div class="ellipsisText">' + secondLineText + '</div>';
$('.maxTwoLine').text("");
$('.maxTwoLine').append(template);
allText = allText.replace(secondLineText, template);
}
var container = ".maxTwoLine";
});
});