html - 多行打字效果

Question

我正在尝试为我的段落添加打字效果。我觉得这很好 link它适用于单行文本。但我想要达到的是一个多行的段落。

white-space:nowrap;

这个css让文字变成了一行，但是没有那个nowrap，效果看起来很奇怪。有人有想法吗？
JSFiddleHTML:

<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

这可能就是你要找的

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

玩转持续时间设置