打印时转到下一行答案

【问题标题】：Going to the next line while printing打印时转到下一行
【发布时间】：2020-04-14 07:37:59
【问题描述】：

var i = 0;
var string = "Size: test ";
var speed = 50;

function printtext() {

  if (i < string.length) {
    document.getElementById("demo").innerHTML += string.charAt(i);
    i++;
    setTimeout(printtext, speed);
  }

}

<button onclick="printtext()">Click me</button>
<div id="demo"></div>

我正在尝试将“尺寸：”和“测试”分开。我希望“测试”位于下一行（下方），这样当我的按钮被点击时，它会显示（像打字机一样）信息列表。

结论：我只是想找到一种方法像某种 \n 一样转到下一行。

谢谢你，

内森

【问题讨论】：

您不必在问题标题中添加(solved)。标记答案就足够了

标签： javascript

【解决方案1】：

由于分隔 Size: 和 test 字符串的唯一内容是空格，因此您可以简单地检查 string.charAt(i) 是否是空格字符。如果是，那么您只需打印一个<br /> 标签而不是空白字符本身。

var i = 0;
var string = "Size: test "; 
var speed = 50;

function printtext() {

  if (i < string.length) {
    var character = string.charAt(i);
    if (character === ' ') {
      character = '<br />';
    }
    
    document.getElementById("demo").innerHTML += character;
    i++;
    setTimeout(printtext, speed);
  }

}

printtext();

&lt;div id="demo"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

你可以用很少的if 语句来做到这一点，就像你可以说 if string.charAt(i) === " ") put <br> 得到下一行

代码↓↓

var i = 0;
var string = "Size: test ";
var speed = 50;

function printtext() {

  if (i < string.length) {
     if(string.charAt(i) === " "){
         document.getElementById("demo").innerHTML += "<br>";
     }
     else 
       document.getElementById("demo").innerHTML += string.charAt(i);
    i++;
    setTimeout(printtext, speed);
  }

}

<button onclick="printtext()">Click me</button>
<div id="demo"></div>

【讨论】：

【解决方案3】：

最简单的方法可能是使用<pre> 元素作为目标，使用\ns 作为换行符。

这样，您甚至可以避免使用.innerHTML，而改用.textContent 或.innerText (which one you like)。

您还可以应用一些 CSS 来恢复默认字体：

var i = 0;
var string = "Size:\ntest ";
var speed = 50;

function printtext() {

  if (i < string.length) {
    document.getElementById("demo").innerText += string.charAt(i);
    i++;
    setTimeout(printtext, speed);
  }

}

pre{
  font: initial
}

<button onclick="printtext()">Click me</button>
<pre id="demo"></pre>

【讨论】：

谢谢各位 FZ，看来我使用的是
而不是
```
。感谢您的快速回复！
```