如何换行或将HTML添加到此Javascript函数？

Question

我试图创建一个打字机效果，使所有工作正常，但是我不知道如何创建新行。

我已经尝试了所有三个：

\n
\r
<br />

但是它只是键入那些字符。

这是我的JavaScript函数：

$.fn.Typewriter = function(opts){
    var $this = this,
        defaults = { animDelay: 50 },
        settings = $.extend(defaults, opts);
    $.each(settings.text, function(i, letter){
        setTimeout(function(){
            $this.html($this.html() + letter);
        }, settings.animDelay * i);
    });
}

这是我如何称呼它的一个例子：

$('#howto').Typewriter({
animDelay: 100,
text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br /> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. \r Ut enim ad minim veniam, quis nostrud exercitation \n ullamco laboris nisi ut aliquip ex ea commodo consequat.'});

最终结果如下：

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."

我希望它看起来像：

Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.

感谢所有帮助！

http://jsfiddle.net/9Qsku/

Answer 1

在字符串上使用\\ n，并以这种方式修改代码段

$.fn.Typewriter = function(opts){
var $this = this,
    defaults = { animDelay: 50 },
    settings = $.extend(defaults, opts);
$.each(settings.text, function(i, letter){
    setTimeout(function(){
        $this.html($this.html() + (letter!='\n'?letter:'<br />'));
    }, settings.animDelay * i);
});
}

Answer 2

<br/>应该可以正常工作： http : //jsfiddle.net/7WVZX/

[更新]问题可能是您正在逐个添加字符，而不是整体添加换行符。 这可能更适合您：

$this.html(settings.text.substr(0,i));

结果： http : //jsfiddle.net/9Qsku/1/

Answer 3

尝试使用.html ...

.html('Lorem ipsum dolor sit amet, <br> consectetur adipisicing elit,');