SOURCE

const container = document.querySelector('.second');
const content = document.querySelector('.content');
const { width: containerWidth } = container.getBoundingClientRect();
const { width: contentWidth } = content.getBoundingClientRect();
const scrollOffset = contentWidth - containerWidth / 2;

console.log(contentWidth)
const bestRatio = 10 / 300; // 10s, 300px
// content.style.setProperty('--animation-time', `${scrollOffset * bestRatio}s`);
content.style.setProperty('--animation-time', `${contentWidth * bestRatio}s`);
content.style.setProperty('--scroll-offset', `-${scrollOffset}px`);

<div class="container">
    <div class="item first">张三</div>
    <div class="item second">
        <div class="content">里受   到手打   刘*   撒大萨 达多大 里受   到手打   刘*   撒大萨 达多大 ------ 里受   到手打   刘*   撒大萨 达多大 里受   到手打   刘*   撒大萨 达多大</div>
    </div>
</div>

.container {
    width: 30%;
    height: 40px;
    border: 1px solid;
    white-space: nowrap;
    display: flex;
}

.second {
    width: calc(100% - 30px);
    overflow: hidden;
    position: relative;
}

.content {
    /* width: max-content; */
    --animation-time: 5s;
    --scroll-offset: 0;
    white-space: pre;
    animation: scroll var(--animation-time) linear infinite;
    position: absolute;
}

@keyframes scroll {
    to {
        /* transform: translateX(var(--scroll-offset)); */
        transform: translateX(-100%);
    }
}