CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

Typing Text in Jquery

Guys i want to make my typing text in to Two lines.

Here is my Demo

Plz check this code

HTML

  <div id="container">

    <div class="writer">Hi! This is a test text. 
        <br><br>
        Can any one         
        Help me in this ?.</div>  

</div>

JAVA SCRIPT

var txt = $('.writer').text();
var timeOut;
var txtLen = txt.length;
var char = 0;
$('.writer').text('|');
(function typeIt() {   
    var humanize = Math.round(Math.random() * (200 - 30)) + 30;
    timeOut = setTimeout(function() {
        char++;
        var type = txt.substring(0, char);
        $('.writer').text(type + '|');
        typeIt();

        if (char == txtLen) {
            $('.writer').text($('.writer').text().slice(0, -1)); // remove the '|'
            clearTimeout(timeOut);
        }

    }, humanize);
}());

Upvotes: 6

Views: 440

Answers (1)

Hashem Qolami
Hashem Qolami

Reputation: 99484

You could add white-space: pre-line; declaration to the .writer in order to break the lines, as follows:

.writer {
    font:bold 23px arial;
    white-space: pre-line;
}

WORKING DEMO

16.6 White space: the 'white-space' property

pre-line This value directs user agents to collapse sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.

It's worth noting that pre-line value is supported in IE8+.

Upvotes: 9

Related Questions