动态文本溢出动画：CSS 实现长文本自动滚动展示-html教程-PHP中文网

动态文本溢出动画：css 实现长文本自动滚动展示

本教程详细介绍了如何使用纯 CSS 实现对溢出容器的长文本进行动态“来回”滚动动画，以确保用户能够完整阅读所有内容。文章涵盖了关键的 CSS 属性配置，如 max-width、overflow、display: inline-block、width: fit-content 以及 @keyframes 动画，并探讨了如何处理文本方向（LTR/RTL）和响应式宽度，提供了一套专业且易于理解的解决方案。

引言：文本溢出与用户体验

在网页设计中，我们经常会遇到文本内容长度不确定的情况。当文本被限制在固定或最大宽度容器内，且设置了 overflow: hidden 时，过长的文本会被截断，导致部分内容不可见。为了提升用户体验，尤其是在显示标题、标签或简短描述时，一种常见的需求是让这些溢出的文本自动“来回”滚动，从而完整展示所有内容。本教程将深入探讨如何利用纯 CSS 实现这一动态效果，确保在文本长度适中时保持静止，而在文本溢出时自动触发动画。

核心原理：动态宽度与动画协同

要实现动态溢出动画，关键在于让容器能够感知其内部文本的真实宽度，并在此基础上计算出需要滚动的距离。传统的固定像素值动画难以适应不同长度的文本。我们的解决方案将围绕以下核心 CSS 特性展开：

容器自适应宽度与最大宽度限制： 使用 display: inline-block 和 width: fit-content 让容器根据内容调整宽度，同时通过 max-width 限制其最大尺寸。
文本不换行： white-space: nowrap 确保文本在一行内显示，即使超出容器。
隐藏溢出部分： overflow: hidden 隐藏超出容器的文本。
动态位移动画： 利用 position: relative、transform: translateX 和 left 在 @keyframes 中创建动画，使文本在溢出时平滑滚动。

实现步骤与代码示例

1. HTML 结构

我们使用一个外部 div 作为文本容器，内部包含一个 h3 元素来承载文本内容。

<div class="container">
  <div class="animated">
    <h3 class="text-animated">
      一些短文本
    </h3>
  </div>

  <br><br><br>

  <div class="animated">
    <h3 class="text-animated">
      一些需要动画展示的长文本，以便用户可以看到所有内容。
    </h3>
  </div>
</div>

登录后复制

这里，div.container 是一个可选的外部容器，用于演示响应式 max-width。div.animated 是我们的主要文本滚动容器，h3.text-animated 则是实际的文本内容。

立即学习“前端免费学习笔记（深入）”；

2. CSS 样式定义

2.1 外部容器样式 (.container - 可选)

为了演示响应式 max-width，我们可以给最外层容器设置一个基于视口宽度的宽度。

.container {
  width: 40vw; /* 宽度为视口宽度的40% */
  position: relative;
}

登录后复制

2.2 文本容器样式 (.animated)

这是实现动态溢出动画的关键容器。

.animated {
  position: relative;        /* 为内部文本的绝对定位或相对定位提供参考 */
  white-space: nowrap;       /* 确保文本不换行 */
  max-width: calc(100% - 5rem); /* 限制容器的最大宽度，这里使用相对父容器的宽度 */
  overflow: hidden;          /* 隐藏超出容器的文本 */
  background: #0c0c0c;       /* 背景色，便于观察效果 */
  display: inline-block;     /* 使容器根据内容宽度调整，同时保持块级特性 */
  width: fit-content;        /* 让容器宽度自适应其内容，但受限于 max-width */
  /* direction: rtl; */       /* 如果需要从右到左的文本方向，取消注释 */
}

登录后复制

关键点解释：

萌动AI

CreateAI旗下AI动漫视频生成平台

438

查看详情

position: relative;: 为内部的 h3.text-animated 提供定位上下文。
white-space: nowrap;: 强制文本不换行，使其在一行内显示，即使超出了 max-width。
max-width: calc(100% - 5rem);: 定义容器的最大宽度。calc() 结合 vw 或 % 可以实现响应式宽度。这里 100% 是指其父容器 .container 的宽度。
overflow: hidden;: 隐藏超出 max-width 的文本部分。
display: inline-block;: 允许容器根据内容宽度调整自身宽度，同时能够设置 max-width。
width: fit-content;: 这是实现动态行为的核心之一。它会尝试让元素的宽度刚好包裹其内容，但会尊重 max-width。这意味着如果文本短，容器就短；如果文本长，容器会增长到 max-width。

2.3 文本内容样式 (.text-animated)

.text-animated {
  color: #fff;                  /* 文本颜色 */
  animation: backAndForth 5s linear infinite; /* 应用动画 */
  display: inline-block;        /* 使文本元素能够响应 transform 和 left 属性 */
  position: relative;           /* 允许文本元素相对于其父元素进行定位 */
  /* direction: rtl; */          /* 如果父容器设置了 rtl，这里也需要设置 */
}

登录后复制

关键点解释：

display: inline-block;: 确保 h3 元素能够正确应用 transform 和 left 属性，并根据其内容宽度进行计算。
position: relative;: 允许 transform 和 left 属性相对于其正常位置进行位移。

2.4 动画关键帧 (@keyframes backAndForth)

动画的定义是实现文本滚动的核心。我们将使用 transform: translateX 和 left 的组合来动态移动文本。

@keyframes backAndForth {
  0% {
    transform: translateX(0); /* 初始位置，无横向位移 */
    left: 0;                  /* 元素左边缘与父容器左边缘对齐 */
  }
  10% {
    transform: translateX(0); /* 保持初始位置一段时间 */
    left: 0;
  }
  45% {
    transform: translateX(calc(-100%)); /* 元素向左移动自身宽度的100% */
    left: 100%;                          /* 元素左边缘移动到父容器右边缘 */
  }
  55% {
    transform: translateX(calc(-100%)); /* 保持在最右端（文本末尾可见） */
    left: 100%;
  }
  90% {
    transform: translateX(0); /* 元素返回初始位置 */
    left: 0;
  }
  100% {
    transform: translateX(0); /* 循环回到起点 */
    left: 0;
  }
}

登录后复制

动画逻辑解释（LTR - 从左到右文本）：

0% - 10%: 文本保持在起始位置，即左侧完全可见。
45% - 55%:
- left: 100%;: 这将 h3.text-animated 元素的左边缘定位到其父容器 .animated 的右边缘。此时，文本的起始部分被隐藏，末尾部分（如果文本够长）可能开始可见。
- transform: translateX(calc(-100%));: 接着，transform: translateX(-100%) 会将元素在其当前位置基础上，向左移动其自身宽度的 100%。
- 结合效果： 如果 h3 元素的左边缘在父容器的右边缘（left: 100%），然后它向左移动了自身宽度，那么它的右边缘将最终与父容器的右边缘对齐。这样，文本的末尾部分就完全展示出来了。
90% - 100%: 文本平滑地返回到初始位置，即左侧完全可见。

这种组合巧妙地实现了动态滚动：当文本短时，width: fit-content 会使 .animated 容器的宽度与 h3.text-animated 元素的宽度相同，且小于 max-width。在这种情况下，left: 100% 和 transform: translateX(-100%) 的组合会使得文本元素刚好移动到与容器右边缘对齐，但由于文本宽度等于容器宽度，实际上并不会产生可见的滚动效果。当文本长时，.animated 容器的宽度达到 max-width，而 h3.text-animated 的宽度会超出容器，此时动画就会生效，将文本末尾滚动到可见区域。

处理文本方向 (RTL - 从右到左)

对于从右到左（RTL）的文本，如阿拉伯语或希伯来语，我们需要调整 direction 属性和 @keyframes 中的 transform 和 left 值。

1. CSS 样式调整

在 .animated 和 .text-animated 中添加 direction: rtl;。

.animated {
  /* ... 其他样式 ... */
  direction: rtl; /* 设置从右到左的文本方向 */
}

.text-animated {
  /* ... 其他样式 ... */
  direction: rtl; /* 与父容器保持一致 */
}

登录后复制

2. 动画关键帧调整

RTL 文本的滚动方向相反，因此 transform 和 left 的值也需要反转。

@keyframes backAndForth {
  0% {
    transform: translateX(0);
    left: 0;
  }
  10% {
    transform: translateX(0);
    left: 0;
  }
  45% {
    transform: translateX(calc(100%)); /* 元素向右移动自身宽度的100% */
    left: -100%;                         /* 元素左边缘移动到父容器左边缘的-100% */
  }
  55% {
    transform: translateX(calc(100%));
    left: -100%;
  }
  90% {
    transform: translateX(0);
    left: 0;
  }
  100% {
    transform: translateX(0);
    left: 0;
  }
}

登录后复制

RTL 动画逻辑解释：

0% - 10%: 文本保持在起始位置，在 RTL 模式下，这意味着文本的右侧（起始部分）完全可见。
45% - 55%:
- left: -100%;: 将 h3.text-animated 元素的左边缘定位到其父容器 .animated 的左边缘之外，距离为父容器宽度的 100%。
- transform: translateX(calc(100%));: 接着，transform: translateX(100%) 会将元素在其当前位置基础上，向右移动其自身宽度的 100%。
- 结合效果： 如果 h3 元素的左边缘在父容器的左边缘之外（left: -100%），然后它向右移动了自身宽度，那么它的左边缘将最终与父容器的左边缘对齐。这样，文本的起始部分（在 RTL 中是右侧）就会滚动到可见区域，而末尾部分（左侧）则被展示出来。

完整代码示例

<div class="container">
  <div class="animated">
    <h3 class="text-animated">
      一些短文本
    </h3>
  </div>

  <br><br><br>

  <div class="animated">
    <h3 class="text-animated">
      一些需要动画展示的长文本，以便用户可以看到所有内容。
    </h3>
  </div>
</div>

<style>
.container {
  width: 40vw; /* 示例：响应式宽度 */
  position: relative;
  margin: 20px; /* 示例：增加一些边距 */
  border: 1px solid #555; /* 示例：边框方便观察 */
}

.animated {
  position: relative;
  white-space: nowrap;
  max-width: calc(100% - 5rem); /* 限制最大宽度，相对于父容器 */
  overflow: hidden;
  background: #0c0c0c;
  display: inline-block;
  width: fit-content; /* 宽度自适应内容，但受限于 max-width */
  margin-top: 10px;
  padding: 5px;
  /* direction: rtl; /* 如果需要RTL，取消注释 */
}

.text-animated {
  color: #fff;
  animation: backAndForth 5s linear infinite;
  display: inline-block;
  position: relative;
  /* direction: rtl; /* 如果需要RTL，取消注释 */
}

/* LTR 动画 */
@keyframes backAndForth {
  0% {
    transform: translateX(0);
    left: 0;
  }
  10% {
    transform: translateX(0);
    left: 0;
  }
  45% {
    transform: translateX(calc(-100%)); /* LTR: 向左移动自身宽度，显示文本末尾 */
    left: 100%;                          /* LTR: 元素左边缘到父容器右边缘 */
  }
  55% {
    transform: translateX(calc(-100%));
    left: 100%;
  }
  90% {
    transform: translateX(0);
    left: 0;
  }
  100% {
    transform: translateX(0);
    left: 0;
  }
}

/* 如果需要RTL动画，请将上面的 @keyframes 替换为以下代码 */
/*
@keyframes backAndForth {
  0% {
    transform: translateX(0);
    left: 0;
  }
  10% {
    transform: translateX(0);
    left: 0;
  }
  45% {
    transform: translateX(calc(100%)); // RTL: 向右移动自身宽度，显示文本开头
    left: -100%;                       // RTL: 元素左边缘到父容器左边缘的-100%
  }
  55% {
    transform: translateX(calc(100%));
    left: -100%;
  }
  90% {
    transform: translateX(0);
    left: 0;
  }
  100% {
    transform: translateX(0);
    left: 0;
  }
}
*/
</style>

登录后复制