换行Javascript内部文本

因此，我制作了一个简单的便笺应用程序，它以带有标题的卡片样式显示便笺。 现在我有一个问题。当人们在没有按enter键的情况下输入下一行时，记事卡也会显示它从文本区获得的方式。 然而，我想让它把线之间的休息，这样它就不会在记事卡溢出

这里有一张图片：它应该像底部的音符，但它像第一个音符。

我需要添加什么CSS或javascript代码

我已经为卡片段落设置了90%的最大宽度，但它似乎忽略了它，只是溢出了。

// Main Variables

let noteForm = document.querySelector("form");
let headlineInput = document.getElementById("headline-input");
let noteInput = document.getElementById("note-input");
let submitButton = document.getElementById("submit-button");
let noteSection = document.getElementById("notes");
let container = document.getElementById("container");
let currentNotes = document.getElementById("current-notes");

// Create Elements on Click

function addElement() {

    if (headlineInput.value.length == 0 || (noteInput.value.length == 0)){
        console.log("Input value null");
        return;
    }
    //Create all elements

    let noteCard = document.createElement("div");
    noteSection.appendChild(noteCard);
    noteCard.className = "notecard";

    let noteHead = document.createElement("h2");
    noteCard.appendChild(noteHead);
    noteHead.className = "note-headline";

    let noteParagraph = document.createElement("p");
    noteCard.append(noteParagraph);
    noteParagraph.className = "note-paragraph";

---

我对注释段落的样式是这样的（我已经用px设置了宽度，但它应该与上面的容器相同）

.note-paragraph{
  width: 500px;
    white-space: pre-wrap;
    overflow: auto;
    word-break: break-all;
  
}

---

你可以在这里看到它

移动

最大宽度：900px；

到

。记事卡

嗨！你可以给显示容器一个宽度，它应该这样做，但如果没有，你可以尝试溢出css属性。我看到你已经给了一个最大宽度，但可能900px太高了？如果你做了js小提琴，我可以四处看看。@AlePlo嘿，是的，在这里：

.note-paragraph{
  width: 500px;
    white-space: pre-wrap;
    overflow: auto;
    word-break: break-all;
  
}