JSFiddle - React, Tailwind, and code Playground

HTML

<div class="maxTwoLine">Lorem Ipsuasdasasdasddasdm asdasdasdasdv bxscdvxcvxcvirçok çeşitxcvxcvxcvlemesi xcvxcv.</div>

<div class="clickB">Click Me</div>

CSS

.maxTwoLine{
    max-width:70px;
    background-color:red;
    padding:20px;
    line-height:15px;
}

.ellipsisText{
    text-overflow: ellipsis;
	width: 70px;
	white-space: nowrap;
	overflow: hidden;
}

JavaScript

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