JSFiddle - React, Tailwind, and code Playground

by sinju

HTML

<div id="container">
Here is the long content, long long content. So long. Too long. Longer than ought to be allowed.
</div>

CSS

div#container {
    width: 200px;   
    border: 1px solid red;
    padding: 3px;
    height: 1em;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    text-overflow: ellipsis;
}

div#content {
    position: absolute;
    overflow: hidden;
    text-overflow: ellipsis;
}

JavaScript

var true_width = (function() {
    var $tempobj = $('#container').clone().contents()
        .wrap('<div id="content"/>').parent().appendTo('body').css({
        'left': '-1000px'
    });
    var result = $tempobj.width();
    $tempobj.remove();
    return result;
})();

$('#container').one('mouseenter', function() {
        var shift_distance = true_width - $(this).width();
        var time_normalized = parseInt(shift_distance / 100, 10) * 1000;
    $(this).contents().wrap('<div id="content">').parent().animate({
        left: -shift_distance,
        right: 0
    }, time_normalized, 'linear');
});