Question

此CSS使文本以打字机效果显示。但问题是，由于CSS中的white-space: nowrap，它只显示顶行。

因此，如果我在单个<p>元素中包含4行的文本，则只会显示顶行。

p{
  color: lime; 
  font-family: "Courier";
  font-size: 20px;
  margin: 10px 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  animation: type 4s steps(60, end);
}

@keyframes type{ 
  from { width: 0; } 
}

如果纯CSS无法实现基于JS的解决方案吗？我不想尝试将一个段落分成几个<p>，特别是因为当宽度发生变化时，换行点会变得混乱。

Answer 1

因此，如果我在单个＆lt; p＆gt;中有文字覆盖4行的元素，只显示顶行。

基于上面的陈述，我假设问题是关于跨越多行的文本，即使给予元素最大可能宽度（也就是说，只更改width不是一个选项）。 / p>

正如我在评论中提到的那样，带有这样动画的东西是，如果删除white-space: nowrap，它就不会像打字机效果一样工作，因为全文会同时开始输入（因为只有width被动画化）并且它会产生一个奇怪的动画，因为当width很小时，文本将会环绕，当它增加时，文本也将移动到前一行。

文本需要限制在一行，或者应分成多个p标记，如下面的代码段所示。如果这些都不能完成，那么你应该看看使用JavaScript（或任何库）。

body {
  background: #000;
  padding-top: 10px;
  width: 500px;
  border: solid white 1px;
}
p {
  color: lime;
  font-family: "Courier";
  font-size: 20px;
  margin: 10px 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  animation: type 4s steps(60, end) forwards;
}
p:nth-child(2) {
  animation-delay: 4s;
}
p:nth-child(3) {
  animation-delay: 8s;
}
p a {
  color: lime;
  text-decoration: none;
}
span {
  animation: blink 1s infinite;
}
@keyframes type {
  to {
    width: 100%;
  }
}
@keyframes blink {
  to {
    opacity: .0;
  }
}
::selection {
  background: black;
}

<p>hi folks, this is typing animation using</p>
<p>CSS. But on the second line it never</p>
<p>shows up. The other lines get cut off.</p>

以下是您删除white-space: nowrap时会发生的情况。你可以看到它不再像打字机一样工作了。

body{
  background: #000;
  padding-top: 10px;
  width: 500px;
  border: solid white 1px;
} 

p{
  color: lime; 
  font-family: "Courier";
  font-size: 20px;
  margin: 10px 0 0 10px;
  overflow: hidden;
  width: 100%;
  animation: type 4s steps(60, end);
}

p:nth-child(2){
  animation: type2 8s steps(60, end);
}

p a{
  color: lime;
  text-decoration: none;
}

span{
  animation: blink 1s infinite;
}

@keyframes type{ 
  from { width: 0; } 
} 

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; } 
} 

@keyframes blink{
  to{opacity: .0;}
}

::selection{
  background: black;
}

<p>hi folks, this is typing animation using CSS But on the second line it never shows up. The other lines get cut off.</p>

如果您愿意使用完全基于JS的方法来实现此动画，那么您可以按照this Fiddle中使用的方法进行操作。它是由the Fiddle提供的Akshay的自定义版本。它使用循环（基于setInterval），然后在每次迭代中修改元素的内容。首先，它只获取内容的第一个字符，然后是前两个，前三个等等，直到内容被完全打印。循环和间隔使它看起来好像被输入。

您可以通过在函数调用中传递所需的值来控制键入的速度，即在键入行之间添加的延迟。

Answer 2

尝试将身体宽度从500px更改为100％。如下所示：

body{
  background: #000;
  padding-top: 10px;
  width: 100%;
  border: solid white 1px;
}

Answer 3

你可以尝试这个

body{
      background: #000;
      padding-top: 10px;
      width: 100%;
      border: solid white 1px;
    } 

    p{
      color: lime; 
      font-family: "Courier";
      font-size: 20px;
      margin: 10px 0 0 1px;
      white-space: nowrap;
      overflow: hidden;
      width: 100%;
      animation: type 4s steps(60, end);
    }

DEMO HERE

动画会在<p>中切断多行文字

3 个答案: