JSFiddle - React, Tailwind, and code Playground

HTML

<div class="w100C">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever s</div>
<br />
<div id="abc">I am very long string</div>

CSS

.w100C {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;    
		width: 100px;
		min-width: 0;
	}

.w100C:hover {	
		overflow: none;
		width: auto;
}

JavaScript

$(document).ready(function() {
    
    function TruncateText(text)
    {
        if(text.length > 12)
        {
             text = txt.substring(0,12) + "...";
        }
        return text;
    }
    
    var txt = $("#abc").text();
    $("#abc").attr("orgTxt", txt);
    txt = TruncateText(txt);
    $("#abc").text(txt);
    
    $("#abc").hover(function(){
        var t = $("#abc").attr("orgTxt");
        $("#abc").text(t);
    }, function(){
        var t =  $("#abc").text();
        t = TruncateText(t);
        $("#abc").text(t);
    });    
});