如何用JavaScript脚本在HTML中实现换行？代码无法正常换行

你的问题出在HTML对空白字符的处理规则：普通文本节点里的换行符\n不会被浏览器渲染成换行，而是会被合并成一个空格。下面给你几种靠谱的解决方法：

方法1：用<br>标签实现换行 #

修改你的JavaScript代码，每次添加消息前先插入一个<br>元素：

let oldchat = '';
const paragraph = document.getElementById("chat");

function SendMsg() {
  const x = document.getElementById("Username");
  const username = x.value;
  const message = prompt();
  if (!message) return;

  // 先添加换行标签
  paragraph.appendChild(document.createElement('br'));
  // 再添加消息文本
  const Modifiedmessage = document.createTextNode(username + ": " + message);
  paragraph.appendChild(Modifiedmessage);
}

方法2：用块级元素包裹每条消息 #

把每条消息放在<p>这类块级元素里，自动实现换行：

let oldchat = '';
const paragraph = document.getElementById("chat");

function SendMsg() {
  const x = document.getElementById("Username");
  const username = x.value;
  const message = prompt();
  if (!message) return;

  // 创建p元素包裹消息
  const messageItem = document.createElement('p');
  messageItem.textContent = `${username}: ${message}`;
  paragraph.appendChild(messageItem);
}

方法3：用CSS让文本保留换行符 #

给#chat元素添加CSS样式，让它识别文本里的\n并渲染成换行：

#chat {
  white-space: pre-wrap;
}

这种情况下你原来的JavaScript代码不需要大改，\n就能正常生效，同时过长的文本会自动换行。

额外提示 #

你的HTML里有个SetUser()按钮，但代码里没实现这个函数，要是需要设置用户名的话，可以补充：

function SetUser() {
  const username = document.getElementById("Username").value.trim();
  if (username) {
    // 可以在这里做用户名存储或验证逻辑
  }
}

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