JSFiddle - React, Tailwind, and code Playground

HTML

<p class="tweet1">First long text displayed fully on hover</p>
<p class="tweet1">Second long text displayed fully on hover</p>
<p class="tweet1">Third long text displayed fully on hover</p>

CSS

.tweet1 {
    overflow:hidden;
    white-space:nowrap;
    width:120px;
}
.hiding {
    text-overflow:ellipsis;
}

JavaScript

var tweets = document.getElementsByClassName('tweet1');
var toggleClassName = 'hiding';
for (var i = 0; i < tweets.length; i++) {
    var tweet = tweets[i];
    addClass(tweet, toggleClassName);

    var slide_timer,
    max = tweet.scrollWidth,
        slide = function () {
            tweet.scrollLeft += 2;
            if (tweet.scrollLeft < max) {
                slide_timer = setTimeout(slide, 40);
            }
        };

    tweet.onmouseover = tweet.onmouseout = function (e) {
        var event = e || window.event,
            isMouseOver = event.type === 'mouseover';
        clearTimeout(slide_timer);
        tweet.className = isMouseOver ? removeClass(this, toggleClassName) : addClass(this, toggleClassName);
        if (e) {
            slide();
        } else {
            tweet.scrollLeft = 0;
        }
    }
}

function hasClass(elem, cName) {
    return new RegExp("(?:^|\\s+)" + cName + "(?:\\s+|$)").test(elem.className);
};

function addClass(elem, cName) {
    if (!hasClass(elem, cName)) {
        elem.className = elem.className ? [elem.className, cName].join(' ') : cName;
    }
};

function removeClass(elem, cName) {
    if (hasClass(elem, cName)) {
        var c = elem.className;
        elem.className = c.replace(new RegExp("(?:^|\\s+)" + cName + "(?:\\s+|$)", "g"), "");
    }
};