关于终端文本效果函数无法正确显示空格及换行符的技术求助

Hey there! I see you're working on a cool terminal-style text effect, and you're running into two common HTML-related quirks with spaces and line breaks. Let's get those sorted out for you.

The Root Causes #

1. Multiple Spaces Collapsing: HTML automatically collapses consecutive spaces into a single one by default—so even if your string has 5 spaces, the browser will only show 1.
2. Line Breaks Ignored: Plain \n characters don't render as line breaks in HTML; you need to use the <br> tag instead.

Modified Code #

Here's your updated consoleText function that handles both issues:

consoleText( 
  [ 
    "hugo@Hugos-MacBook-Pro ~ % ", 
    "All projects made with love",
    "Test with   multiple spaces\nAnd a new line!" // Added test string to demonstrate fixes
  ], 
  "text" 
);

function consoleText(words, id) { 
  var visible = true; 
  var con = document.getElementById("console"); 
  var letterCount = 1; 
  var x = 1; 
  var waiting = false; 
  var target = document.getElementById(id); 

  // Helper function to format text for HTML
  function formatText(text) {
    // Replace every space with non-breaking space to preserve consecutive spaces
    text = text.replace(/ /g, ' ');
    // Replace line breaks with HTML line break tags
    text = text.replace(/\n/g, '<br>');
    return text;
  }

  window.setInterval(function () { 
    if (letterCount === 0 && waiting === false) { 
      waiting = true; 
      target.innerHTML = formatText(words[0].substring(0, letterCount)); 
      window.setTimeout(function () { 
        var usedWord = words.shift(); 
        words.push(usedWord); 
        x = 1; 
        letterCount += x; 
        waiting = false; 
      }, 1000); 
    } else if (letterCount === words[0].length + 1 && waiting === false) { 
      waiting = true; 
      window.setTimeout(function () { 
        x = -1; 
        letterCount += x; 
        waiting = false; 
      }, 1000); 
    } else if (waiting === false) { 
      var currentText = words[0].substring(0, letterCount);
      target.innerHTML = formatText(currentText); 
      letterCount += x; 
    } 
  }, 50); 
}

Key Changes Explained #

• Added formatText Helper: This small function transforms raw text to play nice with HTML:
  • replace(/ /g, ' '): Swaps every regular space with a non-breaking space ( ), which tells the browser to keep spaces as-is instead of collapsing them.
  • replace(/\n/g, '<br>'): Turns newline characters into <br> tags, which HTML recognizes as line breaks.
• Applied Formatting Consistently: We use this helper every time we update the displayed text—whether we're typing out characters, deleting them, or resetting to the start of a new word.

Testing It Out #

I added a test string to the words array that includes multiple spaces and a line break. When you run the code, you'll see those spaces show up properly, and the text will wrap to a new line exactly where the \n is placed.

Since you're new to programming, don't stress about these little HTML quirks—they're super common when working with text in the browser, and you'll get the hang of them quickly. Happy coding!

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