如何显示三行而不是一行

Question

我正在我的网站上创建一个笔记应用程序。我的文本区有输入代码

<textarea class="form-control" rows="3" name="postBody"></textarea>

当我在文本框中输入文本时，我的文本框：

123
345
789

-> 我希望用 3 行这样显示，

但我得到的显示是

123 456 789

我该如何解决这个问题？

Answer 1

您可以使用 white-space: pre-wrap 属性来显示带有换行符的文本。

div {
    white-space: pre-wrap;
}

示例：

function sanitize(string) {
  const map = {
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    '"': "&quot;",
    "'": "&#x27;",
    "/": "&#x2F;"
  };
  const reg = /[&<>"'/]/gi;
  return string.replace(reg, match => map[match]);
}
function display() {
  let elem = document.getElementById("content");
  document.getElementById("display").innerHTML = sanitize(elem.value);
}

    <textarea id="content">
123
      345
      789</textarea
    >

    <div id="display"></div>

    <button onclick="display()">Display</button>

如何显示三行而不是一行

How can I display three line Instead of one line

javascript

input

textarea

display

enter