JSFiddle - React, Tailwind, and code Playground

HTML

<div class="loopSlider" style="height: 100px;">
  <ul>
    <li>
      <a href="#">この１回目のテキストが２週目から挙動がおかしい。</a>
    </li>
    <li>
      <a href="#">こんにちは。今日は良い天気ですね。</a>
    </li>
    <li>
      <a href="#">この３回目のテキストが長い場合だけ、１回目のテキストにかぶって見えてしまう。たとえばこのように何行か続くくらい長い場合だけで、もし短ければかぶったりしない。</a>
    </li>
  </ul>
</div>

CSS

.loopSlider {
    margin: 0 auto;
    text-align: left;
    position: relative;
    overflow: hidden;
    background: #242424;
    margin: 0 20px;
    border-radius: 2px;
    max-width: 250px;
}
.loopSliderWrap {
    top: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
}
ul {
    position: relative;
    padding: 5px;
}
li {
    margin: 0px 5px 5px 5px;
    padding-bottom: 5px;
}
a {
    color: #fff;
    text-decoration: none;
    display: block;
}

JavaScript

$(function(){
    var setElm = $('.loopSlider'),
    slideSpeed = 2000;
 
    setElm.each(function(){
        var self = $(this),
        selfHeight = self.innerHeight(),
        findUl = self.find('ul'),
        findLi = findUl.find('li'),
        listHeight = findLi.outerHeight(),
        listCount = findLi.length,
        loopHeight = listHeight * listCount;
 
        findUl.wrapAll('<div class="loopSliderWrap" />');
        var selfWrap = self.find('.loopSliderWrap');
 
        if(loopHeight > selfHeight){
            findUl.css({height:loopHeight}).clone().appendTo(selfWrap);
 
            selfWrap.css({height:loopHeight*2});
 
            function loopMove(){
                selfWrap.animate({top:'-' + (loopHeight) + 'px'},slideSpeed*listCount,'linear',function(){
                    selfWrap.css({top:'0'});
                    loopMove();
                });
            };
            loopMove();
 
            setElm.hover(function() {
                selfWrap.pause();
            }, function() {
                selfWrap.resume();
            });
        }
    });
});