文本填充问题，CSS Animation

Question

这是一个 CSS 和 HTML animation，简单的文字填充。
出于某种原因，当有空格或添加破折号时，文本会跳转？

下面你可以看到 output：

我在下面添加了代码！

 .comingsoon-loading { font-family: 'Poppins', sans-serif; margin: 0; padding: 0; box-sizing: border-box; display: flex; justify-content: center; align-items: center; min-height: 100vh; }.comingsoon-loading h1 { position: absolute; font-size: 20vh; color: #ffcc00; -webkit-text-stroke: 2px black; text-transform: uppercase; }.comingsoon-loading h1::before { content: attr(data-text); position: absolute; top: 0; left: 0; width: 0; height: 100%; color: black; -webkit-text-stroke: 0px black; border-right: 4px solid black; overflow: hidden; animation: animate 6s linear infinite; } /* animation to fill text */ @keyframes animate { 0%,10%,100% { width: 0; } 50%,70% { width: 100%; } }

 <div class="comingsoon-loading"> <h1 data-text="COMING-SOON">COMING-SOON</h1> </div>

Answer 1

问题在于您在 animation 中处理文本的方式。

您正在为一个缓慢出现的文本字符串设置动画，但不考虑任何继承字符串属性，例如换行符。 在您的 animation 期间，第一个单词：“COMING”，随着宽度的增加正常出现，但是一旦出现连字符，HTML 就会认为您已经插入了一个断点并试图将“SOON”换成一个新行。

这可以通过添加white-space: nowrap; 到您的::before部分，以防止它在 animation 播放时损坏。

HTML

<div class="comingsoon-loading">
  <h1 data-text="COMING-SOON">COMING-SOON</h1>
</div>

CSS

.comingsoon-loading {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: blue;
}

.comingsoon-loading h1 {
  position: absolute;
  font-size: 20vh;
  color: #ffcc00;
  -webkit-text-stroke: 2px black;
  text-transform: uppercase;
}

.comingsoon-loading h1::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  color: black;
  -webkit-text-stroke: 0px black;
  border-right: 2px solid black;
  overflow: hidden;
  animation: animate 5s linear infinite;
  white-space: nowrap;
}

/* animation to fill text */

@keyframes animate {
  0%,
  10%,
  100% {
    width: 0;
  }
  50%,
  70% {
    width: 100%;
  }
}