断线Javascript InnerText

Question

所以，我制作了一个简单的便笺应用程序，它以卡片的形式显示笔记，带有标题和所有这些。现在我有麻烦了。当人们在没有按enter键的情况下，在写句子时输入enter移动到下一行时，notecard也会以文本区域的方式显示它。但是，我希望它在行之间插入断点，这样它就不会在notecard中溢出。

这里有一幅画:它应该像下面的音符，但它就像第一个音符。https://gyazo.com/4d3d75908b7eccb64522be67f621530e

我需要添加哪些代码，如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";

.notecard {
    border:1px solid rgb(243, 242, 242);
    border-radius:5px;
    box-shadow:0px 0px 10px rgba(0, 0, 0, 0.075);
    margin-bottom:50px;
    padding:20px;
}
.notecard h2 {
    margin-bottom:20px;
    border-bottom:2px solid #16e0bd;
    display:inline-block;
    padding-bottom: 10px;
}
.notecard p {
    margin-bottom:30px;
    color:rgb(59, 59, 59);
    font-size:15px;
    max-width:900px;
}

Answer 1

我把便笺-段落设计成这样(我在px中设置了宽度，但应该与上面的容器相同。)

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

你可以在这里看到它，https://jsfiddle.net/e9zdxomy/1/

Answer 2

将max-width:900px;移动到.notecard