CSS 如何让溢出的文本无缝地移动到另一个 div 中

在本文中，我们将介绍如何使用 CSS 实现让溢出的文本可以无缝地移动到另一个 div 中的效果。

阅读更多：CSS 教程

1. CSS Overflow 属性

CSS 的 overflow 属性可以控制一个容器中内容的溢出显示效果。默认情况下，超出容器大小的内容会被隐藏起来，可以通过设置不同的属性值来改变溢出内容的显示方式。

常见的 overflow 属性值包括：
– visible：溢出内容可见，超出容器范围的内容会被显示出来，可能会遮挡其他元素；
– hidden：溢出内容不可见，超出容器范围的内容会被隐藏起来；
– scroll：在容器中显示滚动条，通过滚动条可以查看溢出的内容；
– auto：根据容器内容的大小自动决定是否显示滚动条。

2. 使用 Overflow 实现文本无缝移动效果

为了实现溢出的文本无缝地移动到另一个 div 中的效果，我们可以利用 overflow 属性和一些其他 CSS 技巧。

首先，我们需要创建两个 div，分别为容器 div 和内容 div。容器 div 用于设置固定的宽度和高度，作为一个可视区域；内容 div 用于显示文本内容，并设置 overflow 属性为 hidden，将超出容器范围的文本内容隐藏起来。

接下来，我们可以设置定时器或者使用 JavaScript 来监听容器 div 中的滚动事件。一旦容器 div 的内容发生滚动，我们可以通过计算滚动的距离来判断是否有文本内容超出容器的范围。如果有超出的文本内容，则可以将文本内容复制一份到另一个 div 中，并将原来的文本内容进行截断，以实现无缝滚动的效果。

下面是一个示例代码：

<div class="container">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>
<div id="overflow-text"></div>

<style>
.container {
  width: 300px;
  height: 200px;
  overflow: scroll;
}

.content {
  overflow: hidden;
}

#overflow-text {
  margin-top: -20px;
}
</style>

<script>
const container = document.querySelector('.container');
container.addEventListener('scroll', function() {
  if (container.scrollTop !== 0) {
    const contentText = document.querySelector('.content').innerHTML;
    document.querySelector('#overflow-text').innerHTML = contentText;
    document.querySelector('.content').innerHTML = contentText.slice(20);
    container.scrollTop = 0;
  }
});
</script>

在上面的示例中，我们通过监听容器 div 的滚动事件，一旦滚动事件触发，就会将文本内容复制一份到 id 为 “overflow-text” 的 div 中，并将原来的文本内容进行截断，从而实现了无缝滚动的效果。