纯CSS多行打字机动画故障修复与响应式换行实现咨询

问题修复方案 #

1. 光标额外右移问题 #

• 根本原因：typing动画的100%关键帧中额外设置了margin: 0 -1em 0 1em，会让光标在移动到文本末尾后多偏移1em的距离；同时固定的steps(55)如果和实际文本字符数不匹配，也会出现末尾空步的问题。
• 修复方法：删除@keyframes typing里的margin属性，根据单条文本的实际字符数调整steps参数即可。

2. 响应式自动拆两行问题 #

• 根本原因：原有实现用白色覆盖层左右移动的方案只支持单行文本，同时父容器固定了70px的高度（刚好等于行高），无法容纳两行内容。
• 修复方案：
  1. 调整父容器高度为两行高度（比如140px），同时修改轮播动画的偏移量适配两行高度的li
  2. 替换原有覆盖层实现方案，改为直接控制文本span的宽度动画，开启自动换行属性，就能实现打字过程中自动折行的效果
  3. 修复原有HTML不规范问题：li元素必须嵌套在ul标签内

修正后的完整代码

CSS代码

.dynamictext {
  margin-bottom: 20px;
  line-height: 70px;
  height: 140px; /* 适配两行高度 */
  overflow: hidden;
  padding: 0;
}
.dynamictext li {
  color: #000;
  list-style: none;
  font-size: 3.5vw;
  position: relative;
  top: 0;
  height: 140px; /* 单条内容占两行高度 */
  animation: slide 16s steps(4) infinite;
}
@keyframes slide {
  100% {
    top: -560px; /* 4条内容总偏移量：140px*4 */
  }
}
.dynamictext li span {
  position: relative;
  display: inline-block;
  overflow: hidden;
  word-break: break-word; /* 开启自动换行 */
  width: 0;
  border-right: 2px solid #000; /* 光标直接绑定在文本容器末尾 */
  animation: typing 4s steps(55) infinite forwards;
}
@keyframes typing {
  100% {
    width: 100%;
  }
}

HTML代码

<body>
  <ul class="dynamictext"> <!-- 替换div为ul，符合HTML语法规范 -->
    <li><span>1Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
    <li><span>2Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
    <li><span>3Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
    <li><span>4Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
  </ul>
</body>

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