<div class="container my-4">
  <div class="row">
    <div class="col-12 d-flex align-items-center flex-column">
      <h2>Hover or touch on the text</h2>
      <p><small>On touch devices, tapping on the ellipsis text causes it to animate. Touch to pause and resume animation.</small></p>
    </div>
    <div class="col-12 d-flex justify-content-center">

          <div class="one-line animate-pause">
            <span>This is a long, one line text.</span>
          </div>

    </div>
  </div>
</div>
.one-line {
  border: 1px solid #ddd;
  display: inline-block;
  max-width: 10rem;
  overflow: hidden;
  padding: 1.5rem;
  white-space: nowrap;
  width: 100%;

  &:not(:hover) {
    text-overflow: ellipsis;
  }

  span {
    animation-play-state: running;
  }

  &:not(:focus) {
    animation-play-state: paused;
  }

  &:hover {
    span {
      animation-delay: 0s;
      animation-direction: normal;
      animation-duration: 7s;
      animation-iteration-count: infinite;
      animation-name: scroll-text;
      animation-play-state: running;
      animation-timing-function: linear;
      display: inline-block;
    }
  }

  @keyframes scroll-text {
    0% {
      transform: translateX(0%);
    }

    90% {
      transform: translateX(-100%);
    }

    95% {
      transform: translateX(0%);
    }

    100% {
      transform: translateX(0%);
    }
  }
}

@media (hover: none) and (pointer: coarse) {
  :root .one-line {
    &.animate-pause {
      span {
        animation-play-state: paused;
      }
    }

    &.animate-running {
      span {
        animation-play-state: running;
      }
    }
  }
}
View Compiled 
const onTouchStartHandler = (event) => {
  if (event.type !== "touchend") {
    return;
  }

  const target = event.target;
  const oneLineElement = target.closest(".one-line");

  if (oneLineElement === null) {
    return;
  }

  oneLineElement.classList.toggle("animate-pause");
    oneLineElement.classList.toggle("animate-running");
};

document.body.addEventListener("touchend", onTouchStartHandler);

document.body.addEventListener("click", onTouchStartHandler);

External CSS

  1. https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.