Jquery - 在字符串中强制换行时遇到问题

时间:2012-02-02 17:06:22

标签: javascript jquery html

我有一个字符串,我一次在屏幕上写一个字符。该字符串应该打印在三行上,我尝试使用\ n换行符,但整个字符串仍然出现在一行上。我做错了什么?

<?php
include("header.php");
?>

<body>
<div id="content" class="termFont" align="left">
<p>
<p class="caption"></p><p class="cursor">|</p>

</p>
</div>
<script type="text/javascript">
var captionLength = 0;
var caption = "Greetings Professor Falken\n\nA strange game. The only winning move is not to play.\n\nHow about a nice game of chess?";


function cursorAnimation()
{
  $("p.cursor").animate(
  {
    opacity: 0
  }, "fast", "swing").animate(
  {
    opacity: 1
  }, "fast", "swing");
}

$(document).ready(function()
{
    blinkingCursor();
 setInterval ( "cursorAnimation()", 600 );
});

function blinkingCursor()
{
  type();
}

function type()
{
  $('p.caption').html(caption.substr(0, captionLength++));
  if(captionLength < caption.length+1)
  {
    setTimeout("type()", 50);
  }
  else
  {
    captionLength = 0;
    caption = "";
  }
}
</script>
</body>
</html>

1 个答案:

答案 0 :(得分:2)

在字符串中添加<br>而不是“\ n”。 HTML通常不关心空格(除非设置样式以便这样做)。

同样,当您致电setTimeout()时,请执行以下操作:

setTimeout(type, 50);

使用字符串会导致各种奇怪的问题,而且很少需要。

编辑 - 至于我对HTML样式的评论,你可以在CSS中为“caption”元素添加“white-space:pre”。然后你的新行就会被遵守。