如何在JavaScript单行字符串中换行？HTML中\n不生效求助

Hey there! I get it—you're trying to add line breaks to your typing effect using \n, but HTML isn't rendering them as expected. That's a common gotcha because HTML ignores plain newline characters by default (it collapses whitespace like newlines and multiple spaces into a single space). Let's fix this with two straightforward solutions:

Solution 1: Use CSS to Recognize Newlines #

This is the simplest approach—just add a CSS rule to your <p id="terminal"> element that tells HTML to respect newline characters. Here's how to update your code:

<html> 
<head> 
  <title>test</title>
  <style>
    #terminal {
      white-space: pre-line; /* Respects newlines, wraps long lines, and collapses extra spaces */
      /* Or use white-space: pre-wrap; if you want to preserve all spaces too */
    }
  </style>
</head> 
<body bgcolor="black"> 
  <font color="green"> 
    <p id="terminal"></p> 
    <script> 
      var text = "this is a test\nthis should be on the next line"; 
      var count = 0; 
      var speed = 50; 
      function Type() { 
        if(count < text.length) { 
          document.getElementById("terminal").innerHTML += text.charAt(count); 
          count++; 
          setTimeout(Type, speed); 
        } 
      }
      Type(); // Don't forget to call the function!
    </script> 
  </font> 
</body> 
</html>

With white-space: pre-line, your \n characters will automatically turn into line breaks when the text renders, and your typing effect will work exactly as you wrote it.

Solution 2: Replace \n with HTML Line Breaks (<br>) #

If you prefer to handle this in JavaScript instead of CSS, you can modify your typing function to detect newline characters and insert <br> tags instead. This ensures the line break is added as a single "step" in your typing animation:

<html> 
<head> 
  <title>test</title>
</head> 
<body bgcolor="black"> 
  <font color="green"> 
    <p id="terminal"></p> 
    <script> 
      var text = "this is a test\nthis should be on the next line"; 
      var count = 0; 
      var speed = 50; 
      function Type() { 
        if(count < text.length) { 
          const currentChar = text.charAt(count);
          // Check if we're at a newline character
          if(currentChar === '\n') {
            document.getElementById("terminal").innerHTML += '<br>';
          } else {
            document.getElementById("terminal").innerHTML += currentChar;
          }
          count++; 
          setTimeout(Type, speed); 
        } 
      }
      Type();
    </script> 
  </font> 
</body> 
</html>

This way, when the function hits a \n, it inserts a proper HTML line break instead of just adding the newline character to the DOM.

Either solution will fix your line break issue—pick whichever fits your workflow better!

内容的提问来源于stack exchange，提问作者John Doe