动画截断 中的多行文本答案

【问题标题】：Animation cuts off multiple lines of text in 动画截断 中的多行文本
【发布时间】：2016-05-09 05:31:23
【问题描述】：

此 CSS 使文本具有打字机效果。然而问题在于，由于 CSS 中的white-space: nowrap，它只显示顶行。

因此，如果我在一个覆盖 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 的解决方案？我不想尝试将一个段落分成几个，特别是因为当宽度改变时，换行点会变得混乱。

【问题讨论】：

这样的动画的问题是，如果你删除white-space: nowrap，它不会像打字机效果那样工作，因为所有四行都会同时开始输入（因为只有宽度是动画）。您需要将自己限制在一行（或）每行使用多个 p 元素。
没关系，哈利：D @Badrush 检查这个stackoverflow.com/questions/4147080/…
或者你可以使用类似jsfiddle.net/victor_007/4jy6xjr9
不错的@Vitorinofernandes :)
@Badrush：那个人使用 JS 从整个内容中仅获取第一个字符、前两个、前三个（等等），并使用循环打印它们（使用setTimeout）。循环一直持续到打印完所有内容。

标签： javascript jquery css css-animations

【解决方案1】：

因此，如果我在一个包含 4 行的

元素中包含文本，则只会显示顶行。

基于上述陈述，我假设问题是关于跨越多行的文本，即使为元素提供了最大可能宽度（也就是说，仅更改 width 不是一种选择）。

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

文本需要限制为单行，或者应该分成多个p 标签，如下面的sn-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;
}

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

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

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

【讨论】：

你们有基于 JS 的解决方案吗？我不想尝试将一个段落分成几个
尤其是因为当宽度改变时，换行点会变得混乱。
@Badrush：这是一个明智的选择（完全使用 JS）。 Here 是我朋友为自己制作的小提琴，您可能会发现它很有用。如果他不想将其作为单独的答案发布，我会将其添加到我的答案中。
嘿，有时我会启动此效果，但我想在有人单击按钮时完全停止此效果。如何在点击其他地方时停止代码？
@Badrush：这很简单。当用户单击页面上的任何位置时，我们只需要清除间隔（我假设您要求的是 JS 版本）。这里快午夜了，我正在通过电话回复。早上会提供样品:)
@Badrush: Here 是更新的小提琴。当您单击文档上的任意位置时，它会停止输入。

【解决方案2】：

尝试将主体的宽度从 500 像素更改为 100%。下面是这样的：

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

【讨论】：

嗯，我的实际代码，包含段落的元素的宽度是固定的，所以我不能将所有文本都放在一行中。

【解决方案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

【讨论】：

你只是改变了身体宽度吗？ ...如果是这样，那不是我正在寻找的解决方案。