在Jquery中键入文本 [英] Typing Text in Jquery

问题描述

我想让我的文本输入两行。

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

这是我的 演示

Here is my Demo

请检查此代码

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

推荐答案

您可以添加white-space：pre-line; 声明到 .writer 为了打破行，如下：

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属性

16.6 White space: the 'white-space' property

pre-line 此值指示用户代理折叠空格序列。行
在保留的换行符处断开，并根据需要填充
行框。

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.

pre-line 值在 IE8 + 中受支持。

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

这篇关于在Jquery中键入文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！