Typing effect for multiple lines

Question

I am trying to add typing effect to my paragraph. I found this nice link It works nicely for one line text. But what I am trying to reach is a paragraph with multiple lines.

white-space:nowrap;

this css makes the text into one line, but without that nowrap, the effect looks weird. Anyone has an idea?
JSFiddle HTML:

<div class="css-typing">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

CSS:

.css-typing {
    width: 200px;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: type 2s steps(50, end);
    animation: type 5s steps(50, end);
}

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

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

Answer 1

this might be what you are looking for

Fiddle

var spans = '<span>' + str.split('').join('</span><span>') + '</span>';
$(spans).hide().appendTo('.css-typing').each(function (i) {
    $(this).delay(100 * i).css({
        display: 'inline',
        opacity: 0
    }).animate({
        opacity: 1
    }, 100);
});

play around with the duration settings