如何換行或將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,');