如何使垂直文本滚动停止在每一行

垂直文本滚动停止在每一行的效果可以通过CSS和JavaScript来实现。下面是一种常见的实现方式：

使用CSS创建一个固定高度的容器，设置overflow: hidden来隐藏超出容器高度的内容。
在容器内部创建一个包含文本的<div>元素，并设置position: relative来确保后续的绝对定位生效。
使用JavaScript获取文本行数和每行的高度。
使用JavaScript计算出文本滚动的总高度，并设置top属性为负的滚动高度，使文本向上滚动。
使用JavaScript设置定时器，定时更新滚动的位置，使文本看起来在垂直方向上滚动。
当滚动到每一行的末尾时，使用JavaScript将滚动位置调整到下一行的起始位置，实现停止在每一行的效果。

以下是一个示例的代码实现：

HTML:

<div class="scroll-container">
  <div class="scroll-content">
    <p>第一行文本</p>
    <p>第二行文本</p>
    <p>第三行文本</p>
    <p>第四行文本</p>
    <p>第五行文本</p>
  </div>
</div>

CSS:

.scroll-container {
  height: 100px; /* 容器高度 */
  overflow: hidden;
}

.scroll-content {
  position: relative;
}

.scroll-content p {
  margin: 0;
  line-height: 20px; /* 每行的高度 */
}

JavaScript:

var container = document.querySelector('.scroll-container');
var content = document.querySelector('.scroll-content');
var lineHeight = parseInt(getComputedStyle(content.querySelector('p')).lineHeight);
var lineCount = Math.floor(container.clientHeight / lineHeight);
var scrollHeight = lineHeight * lineCount;
var currentPosition = 0;

function scrollText() {
  currentPosition -= 1; // 滚动速度，可根据需要调整
  content.style.top = currentPosition + 'px';

  if (Math.abs(currentPosition) >= scrollHeight) {
    currentPosition = 0;
    content.style.top = currentPosition + 'px';
  }
}

setInterval(scrollText, 50); // 滚动间隔，可根据需要调整

这样，垂直文本滚动就会停止在每一行。你可以根据实际需求调整滚动速度、滚动间隔和容器高度等参数。