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

Question

I trying to create a typewriter effect, I got everything working, but I cannot figure out how to create a new line.

I've tried all three:

\n
\r
<br />

but it just types those characters.

Here is my javascript function:

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

Here is an example how I'm calling it:

$('#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.'});

This is how it end up looking:

"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."

I want it to look like:

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.

All help is appreciated!

http://jsfiddle.net/9Qsku/

Answer 1

use \\n on the string and the snipplet modified this way

$.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/> should work fine: http://jsfiddle.net/7WVZX/

[Update] The issue might be that you are adding the characters one by one, instead of adding the line break as a whole. This might work better for you:

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

The result: http://jsfiddle.net/9Qsku/1/

Answer 3

尝试使用.html ...

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