怎么实现在网页上插入一个DIV实现逐字显示效果并且能换行
例如这段代码，不过不能实现分行显示，求大神改进
<html>
<head>
<title>逐字显示文字</title>
<script language="javascript">
<!--
text = "特顿发是树上是是";
i = 0;
function type(){
str = text.substr(0,i);
txt.innerHTML = str + "_";
i++;
if (i>text.length)i=0;
setTimeout("type()",300);
}
//-->
</script>
</head>
<body onLoad="type()">
<div id="txt"></div>
</body>
</html>
[解决办法]
有点小问题前面的字数控制，改这样
<html>
<head>
<title>javascript文字逐字逐行显示效果</title>
<script>
var text = "12345678901234567890123456789012345678901234567890";
var textLen = text.length;
var lineNum = 10; //定义每行显示多少个字
var num = 0;
var _ = document.createTextNode('_');
var i = 0;
function type() {
str = text.substr(i, 1);
var txt = document.getElementById('txt');
txt.appendChild(document.createTextNode(str));
txt.appendChild(_);
num++;
if (num > 0 && num % lineNum == 0) txt.appendChild(document.createElement('br'));
i++;
if (i < textLen) setTimeout(function () { type(i) }, 300); else txt.removeChild(_);
}
</script>
</head>
<body onload="type()">
<div id="txt"></div>
</body>
</html>
[解决办法]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
#tcfr {
width: 200px;
height: 300px;
background: #99ccff;
font-size: 20px;
text-indent: 40px;
}
#tcfr p {
margin: 0px;
}
</style>
</head>
<body>
<div id="tcfr">
</div>
<script type="text/javascript">
var str = "想在这个页面上插入一个或一个区域实现文字的逐字显示且能实现分行、缩进。\n这是云盘连接网页效果代码都已打包 师哥师姐们打开看一下就行！！谢谢";
var shtml = "";
function run()
{
var html=str.charAt(0);
shtml += html=="\n"?"</p><p>":html;
document.getElementById("tcfr").innerHTML = "<p>"+shtml+"</p>";
str=str.slice(1);
if(str!="")
setTimeout(run,100);
}
run();
</script>
</body>
</html>