Badrush Badrush - 6 months ago 199
Javascript Question

Animation cuts off multiple lines of text in <p>

This CSS makes the text appear with a typewriter effect. However the issue is that because of the

white-space: nowrap
in the CSS it only shows the top line.

So if I have text in a single
<p>
element that covers 4 lines, only the top line gets shown.

See the codepen for example.

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; }
}


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
<p>
especially since the point at which there is a line break would get messed up when the width changed.

Answer

So if I have text in a single <p> element that covers 4 lines, only the top line gets shown.

Based on the above statement, I assume that the question is about text spanning multiple lines even when the maximum possible width is given to the element (that is, changing just the width is not an option).

As I had mentioned in my comment, the thing with animations like this is that if you remove the white-space: nowrap, it won't work like a typewriter effect because the full text will start getting typed at the same time (as only the width is being animated) and it will result in a weird animation because when the width is small the text will wrap-around and when it increases the text will also move to previous lines.

The text needs to be restricted to a single line or it should be split into multiple p tags like in the below snippet. If neither of these can be done then you should look at using JavaScript (or any library).

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>


The below is what would happen if you just remove white-space: nowrap. You can see how it does not work like a typewriter anymore.

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>


If you are open to using a fully JS based approach for achieving this animation then you could follow the method used in this Fiddle. It is a customized version of the Fiddle contributed by Akshay. It uses a loop (based on setInterval) and then modifies the content of the element in every iteration. First it fetches only the first character of the content, then the first two, first three and so-on till the content is fully printed. The looping and the interval makes it look as though it is being typed out.

You can control the speed of the typing, the delay that is added between the typing of lines by passing the required values in the function call.