Html 如何在 CSS 更改文本动画中添加换行符

发布于08月25日

我正在建设使用Squaspace的网站，并添加自定义的CSS来复制文本更改动画的设计，每3秒更改一次文本.文本内容被分成两行，并进行zoom 以适应文本框.

我有代码块，我在其中添加了html标题h2.

<h2 style="text-align:center; font-size:48px" class="animated-text">
  <span style="display:block;"></span>
</h2>

自定义css

.animated-text {
  h2 {
    display: inline-block !important;
  }
  span::before {
    content: "Every body is different, and every workout is unique";
    animation: animate infinite 5s;
  }
  @keyframes animate {
    0% {
      content: "Every body is different, and every workout is unique";
    }
    50% {
      content: "Evidence-based, and fitness trainer reviewed Affordable, accessible, intentional"
    }
  }
}

附件是我正在try 实现的设计的屏幕截图

Actual Design - Text block 1个

Actual Design - Text block 2个

然而，我的实际结果并不准确，因为我试图使文本换行以适应文本块.是否可以在SPAN动画内容的文本内容中添加换行符，或者复制设计的最佳方式是什么？

谢谢!

Actual result - Text block 1个

.animated-text { h2 { display: inline-block !important; } span::before { content: "Every body is different, \a and every workout is unique"; white-space: pre; /* this is important */ animation: animate infinite 5s; } @keyframes animate { 0% { content: "Every body is different, \a and every workout is unique"; } 50% { content: "Evidence-based, and fitness trainer reviewed \a Affordable, accessible, intentional" } } }

Html 如何在 CSS 更改文本动画中添加换行符

推荐答案

Html相关问答推荐

Angular 17 -如何使用@if @else向 *ngIf的同一个ng-模板指示其他两个

当各种可选元素有效时，如何 Select 第一个元素？

如何访问django + tailwind中的媒体文件夹

将文本区域标签的内容着色为SON(带有 colored颜色 )

CSS动画积分计数器

R中的动态Webscraping

当表头包含特殊字符时，R Quarto发布的HTML表中不必要的大列宽

悬停时跳转的内容

在 bootstrap 中的弹性项之间添加连接行

单独处理Button：Focus的多行按钮

在TWebLabel标题中设置换行符/换行符的方法？

与窗高匹配的响应式正方形网格

如何设计缠绕锚点元素的样式？

带有数据 URI 的音频在 Chrome 中失败

如何消除线性渐变线的模糊？

CSS 跨度与子元素交替 colored颜色

使用 R 中的 rvest 包获取搜索结果的第一个链接

将表格标题和过滤器调整到表格的顶部边缘

鼠标悬停时切换 colored颜色的双色链接

使用 htmloutput 在shiny 的应用程序中呈现文本