如何隐藏div溢出文本并实现文本滚动到末尾后回到开头？

一、修复overflow: hidden不生效的问题 #

你的代码里overflow: hidden没起作用，核心原因是：

• #container设置了position: fixed，会脱离父元素#box的文档流，父元素的溢出规则无法约束它；
• 你把overflow: hidden加在了hover状态的#container上，正确的做法是给**父容器#box**设置overflow: hidden，同时把#container的定位改成relative（或者去掉fixed，用默认的static），这样超出#box高度的内容才会被隐藏。

二、实现滚动到末尾自动回到开头的循环效果 #

用margin的过渡很难实现无缝循环，推荐用CSS动画@keyframes来做，步骤如下：

1. 给#container复制一份内容，让滚动到末尾时能衔接开头；
2. 用translateY动画实现垂直滚动，设置infinite让动画无限循环。

修改后的完整代码 #

CSS 代码

#box {
  background-color: rgb(162, 0, 255);
  height: 400px;
  overflow: hidden; /* 父容器设置隐藏溢出内容 */
  position: relative; /* 让子元素的relative定位基于它 */
}

#container {
  position: relative; /* 去掉fixed，改为relative */
  font-size: 20px;
  margin-top: 10px;
  animation: scrollLoop 20s linear infinite; /* 调用无限循环动画 */
}

/* 鼠标悬停时暂停动画 */
#box:hover #container {
  animation-play-state: paused;
}

/* 定义滚动动画 */
@keyframes scrollLoop {
  0% {
    transform: translateY(0);
  }
  100% {
    /* 滚动距离等于容器自身高度的一半（因为复制了一份内容） */
    transform: translateY(-50%);
  }
}

HTML 代码

<div id="box">
  <div id="container">
    <a href="#">link1</a> some text...<br><br>
    <a href="#">link2</a> some more text 2....<br><br>
    <a href="#">link3</a> some text 3....<br><br>
    <a href="#">link4</a> some text 3....<br><br>
    <a href="#">link5</a> some text 3....<br><br>
    <a href="#">link6</a> some text 3....<br><br>
    <a href="#">link7</a> some text 3....<br><br>
    <a href="#">link8</a> some text 3!....<br><br>
    <!-- 复制一份内容，实现无缝循环 -->
    <a href="#">link1</a> some text...<br><br>
    <a href="#">link2</a> some more text 2....<br><br>
    <a href="#">link3</a> some text 3....<br><br>
    <a href="#">link4</a> some text 3....<br><br>
    <a href="#">link5</a> some text 3....<br><br>
    <a href="#">link6</a> some text 3....<br><br>
    <a href="#">link7</a> some text 3....<br><br>
    <a href="#">link8</a> some text 3!....<br><br>
  </div>
</div>

说明 #

• 父容器#box设置overflow: hidden后，超出400px高度的内容会被隐藏；
• 复制#container内的内容，是为了让动画滚动到末尾时，能无缝衔接开头的内容，避免出现空白；
• animation: scrollLoop 20s linear infinite中的20s是滚动一次的总时长，可以根据需求调整；
• 鼠标悬停时动画暂停，提升交互体验。

内容的提问来源于stack exchange，提问作者Jack