title: Animation cuts off multiple lines of text in <p>
body: <p>This CSS makes the text appear with a typewriter effect. However the issue is that because of the <code>white-space: nowrap</code> in the CSS it only shows the top line.</p>
  
  <p>So if I have text in a single <code>&lt;p&gt;</code> element that covers 4 lines, only the top line gets shown.</p>
  
  <p><a href="https://codepen.io/SandManMoshi/pen/bpzvRR" rel="nofollow">See the codepen for example</a>.</p>
  
  <pre><code>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; } 
  } 
  </code></pre>
  
  <p>Are there any JS based solutions if it is not possible with pure CSS? I would like to not have to try to break up a paragraph into several <code>&lt;p&gt;</code> especially since the point at which there is a line break would get messed up when the width changed.</p>