如何在CSS文本切换动画中添加换行？（Squarespace场景）

核心问题说明 #

CSS content 属性无法实现可靠的换行适配（即便用 \a 配合 white-space: pre-wrap，也容易出现布局跳动、换行位置不可控的问题）。更优方案是通过多文本容器+CSS显隐动画实现需求，既能精准控制两行文本的排版，又能适配固定宽度的文本框。

步骤1：修改HTML结构 #

替换原有HTML，用独立容器包裹每组需要切换的两行文本，可手动用<br>指定换行位置，或通过容器宽度自动换行：

<h2 class="animated-text" style="text-align:center; font-size:48px; max-width: 800px; margin: 0 auto;">
  <div class="text-item">Every body is different,<br>and every workout is unique</div>
  <div class="text-item">Evidence-based, and fitness trainer reviewed<br>Affordable, accessible, intentional</div>
</h2>

• max-width：控制文本框宽度，确保文本适配目标设计的容器大小
• <br>：手动指定换行位置，精准匹配预期效果

步骤2：添加自定义CSS #

将以下代码添加到Squarespace的「设计」>「自定义CSS」面板中，实现每3秒平滑切换的动画：

.animated-text {
  position: relative;
  overflow: hidden;
  text-align: center;
  font-size: 48px;
  max-width: 800px;
  margin: 0 auto;
}

.text-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* 默认显示第一组文本 */
.text-item:first-child {
  position: static;
  opacity: 1;
  visibility: visible;
}

/* 定义切换动画 */
@keyframes textSwitch {
  0%, 40% {
    .text-item:first-child { opacity: 1; visibility: visible; }
    .text-item:last-child { opacity: 0; visibility: hidden; }
  }
  50%, 90% {
    .text-item:first-child { opacity: 0; visibility: hidden; }
    .text-item:last-child { opacity: 1; visibility: visible; }
  }
  100% {
    .text-item:first-child { opacity: 1; visibility: visible; }
    .text-item:last-child { opacity: 0; visibility: hidden; }
  }
}

/* 绑定动画到容器，总时长6秒=切换过渡+停留时间 */
.animated-text {
  animation: textSwitch 6s infinite;
}

• 动画总时长6秒，每组文本停留约2.5秒，过渡时间0.5秒，实现每3秒完成一次完整切换
• visibility: hidden 配合 opacity 确保隐藏的文本不占据布局空间，避免跳动

原代码问题修正 #

原CSS中的.animated-text h2选择器无效（因为.animated-text本身就是h2的类），且依赖content切换文本的方式无法适配换行需求，上述方案彻底规避了这些问题。

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