JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
<div class="name"><a href="#">Длинное, нет, очень длинное назвние</a></div>
</div>

CSS

.block {
	position: relative;
	width: 270px;
    margin-top:50px;
}
.name a {
    bottom: 0;
    display: block;
    font-size: 24px;
    height: 30px;
    left: 0;
    line-height: 30px;
    margin: 0 5%;
    overflow: hidden;
    position: absolute;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 90%;
}
.name a:hover {
    text-overflow: clip;
}

JavaScript

function run_scroll() {
	var $link = $(this),
	    target = $link.width() - $link.parent().width();
	if (target > 0) {
		$link.stop().animate({
				'margin-left': -target
			},
			20 * target, 'linear'
		);
	}
}

function reset_scroll() {
	var $link = $(this);
	$link.stop().animate({
			'margin-left': 0
		},
		250
	);
}

function name_scroll() {

	$('.name a').hover(run_scroll,reset_scroll);
	
}