How can I make a writing animation(change of text) on a users hover with HTML, CSS, and JS, just without the caret

Question

I'm trying to make something with an effect similar to this (where the text is getting typed on it's own), without the caret, and set that to happen when the user hover's over it. Any help is appreciated, Thanks.

Answer 1

This works for one line. The only problem is that it doesn't wrap text.

 .typewriter { width: fit-content; } .typewriter div { overflow: hidden; white-space: nowrap; margin: 0 auto; letter-spacing: .05em; animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; } @keyframes typing { from { width: 0 } to { width: 100% } }

 <div class = 'typewriter'> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>