CSS打字动画文本右移：如何实现文本始终左对齐？

你的问题核心出在两个地方：

• 所有文本<span>都是inline-block，HTML代码里的换行/空格会被渲染成空白间隙，导致后续文本向右偏移；
• 部分.text_*类的max-width属性缺失单位（比如.text_3的5.3、.text_4的15），这会让浏览器无法正确解析宽度，进而引发布局异常。

用text-align: left和margin-left:0没用，是因为这些空白间隙属于元素间的外部间距，不是文本对齐或内边距的问题；而margin-right:100%会强制元素占据整行，自然会换行。

解决方案 #

1. 消除inline-block元素间的空白：给父元素#subtitle添加font-size: 0;，然后在每个文本span中重新设置字体大小（避免继承父元素的0字号导致文字消失）。
2. 补全缺失的单位：把所有max-width的无单位值补上em单位，确保宽度解析正确。
3. 保持布局逻辑不变：保留inline-block让文本横向排列，通过上述两步解决偏移问题。

修正后的完整代码 #

CSS部分

.text_1 {
  animation: text1;
  max-width: 12.5em;
  padding-bottom: 0.1em;
  font-size: 2.5em; /* 继承父元素font-size:0后，重新设置字号 */
}

.text_2 {
  animation: text2;
  max-width: 9.1em;
  padding-bottom: 0.1em;
  font-size: 2.5em;
}

.text_3 {
  animation: text3;
  max-width: 5.3em; /* 补全em单位 */
  padding-bottom: 0.1em;
  font-size: 2.5em;
}

.text_4 {
  animation: text4;
  max-width: 15em; /* 补全em单位 */
  padding-bottom: 0.1em;
  font-size: 2.5em;
}

.text_5 {
  animation: text5;
  max-width: 15.2em; /* 补全em单位 */
  padding-bottom: 0.1em;
  font-size: 2.5em;
}

.text_1,
.text_2,
.text_3,
.text_4,
.text_5 {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  position: relative;
  animation-duration: 20s;
  animation-timing-function: steps(25, end);
  animation-iteration-count: infinite;
}

.text_1::after,
.text_2::after,
.text_3::after,
.text_4::after,
.text_5::after {
  content: "|";
  position: absolute;
  right: 0;
  animation: caret infinite;
  animation-duration: 1s;
  animation-timing-function: steps(1, end);
}

@keyframes text5 {
  0%,
  80%,
  100% {
    width: 0;
  }
  85%,
  95% {
    width: 15.2em;
  }
}

@keyframes text4 {
  0%,
  60%,
  80%,
  100% {
    width: 0;
  }
  65%,
  75% {
    width: 15em;
  }
}

@keyframes text3 {
  0%,
  40%,
  60%,
  100% {
    width: 0;
  }
  45%,
  55% {
    width: 5.3em;
  }
}

@keyframes text2 {
  0%,
  20%,
  40%,
  100% {
    width: 0;
  }
  25%,
  35% {
    width: 9.1em;
  }
}

@keyframes text1 {
  0%,
  20%,
  100% {
    width: 0;
  }
  5%,
  15% {
    width: 12.5em;
  }
}

@keyframes caret {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: Segoe UI Black;
}

.container-text {
  padding-top: 5em;
  padding-left: 5em;
  padding-bottom: 30em;
  margin-top: 3em; /* 补全em单位 */
}

.container-fluid {
  margin-top: 5em;
}

#title {
  font-size: 3em;
}

#subtitle {
  font-size: 0; /* 消除inline-block元素间的空白 */
  font-family: Segoe UI Light;
  margin-bottom: 1em;
  background: red;
}

#subsubtitle {
  font-size: 1.5em;
  font-family: Segoe UI Light;
  color: #BFBFBF;
  margin-bottom: 1em;
}

HTML部分（无需修改，保持原结构即可）

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-8 container-text">
      <h1 id="title">Title</h1>
      <h2 id="subtitle">
        <span class="text_1">Tailor your marketing strategy</span>
        <span class="text_2">Gauge public opinion</span>
        <span class="text_3">Study trends</span>
        <span class="text_4">Explore variables like demographics</span>
        <span class="text_5">Monitor sentiment related to a topic</span>
      </h2>
    </div>
  </div>
</div>

这样修改后，所有文本span会严格左对齐，打字切换时不会出现偏移，同时保持横向排列不换行。

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