尝试过的事情：

Question

我有一个div正在填充using .text()方法但是当我输入一个长文本条目时，div的高度没有响应，文本溢出{{1} }。

我有一个div和一个按钮，当按下按钮时，文本区域的值被插入到div中。

尝试过的事情：

textarea

请求的完整示例

HTML：

Height: auto;
display: inline-block;
overflow: visible/auto; etc

CSS：

<body>
    <div data-role="page" id="article1">
        <div data-role="header" data-theme="a" data-position="fixed">
            <h1>Notes</h1>
        </div>

        <div data-role="content">
            <div id="addContainer">
                <button id="addNoteBtn" data-role="button">Add Note</button>
                <textarea id="noteInput" class="textarea" rows="10" cols="50"></textarea>

                <button id="savenotesbtn" data-role="button">Save</button>-->
            </div>
            <div id="displayContainer"></div>
        </div>
    </div>

</body>

JS：

#addContainer {
     margin: 20px 20px 50px 20px;
}
 #displayContainer {
     margin: 20px 20px 20px 20px;
}
 .noteDisplay {
     display: inline-block;
     color: white;
     background-color: #96c56f;
     width: 100%;
     padding: 5px, 0px, 5px, 0px;
     border: solid 2px black;
     border-radius: 5px;
     margin-bottom: 5px;
}
 .textarea {
     width: 100%;
     height: 100%;
     font: 1em arial;
     color: rgba(50, 82, 50, 1.0);
}
 .textarea:focus {
     color: rgba(50, 82, 50, 1.0);
     border: 2px solid #96c56f;
     box-shadow: 0px 1px 1px #888888;
}

Answer 1

尝试word-wrap: break-word;获取css，这应该可以解决问题。

（提供html代码会很有用并且是溢出文本的图像）

您需要了解有关css溢出的所有内容，您可以在此处找到它：http://www.codelord.net/2013/08/23/css-tip-overflowing-with-text/。

这是工作示例

$(document).ready(function () {
    var savesnotesbtn = document.getElementById("savenotesbtn");
    var addnotebtn = document.getElementById("addNoteBtn");

    //var noteCount = localStorage.getItem("noteCount");

    if (noteCount === null) {
      var noteCount = 0;
    }


    addnotebtn.addEventListener("click", addNotes);

    //ADD NOTES
    function addNotes() {
        noteCount++;
        var note = $("#noteInput").val();
        //console.log("Note: " + note);
        //console.log("Note Count: " + noteCount);
        var display = document.createElement("div");
        document.getElementById("displayContainer").appendChild(display);
        display.className = "noteDisplay";
        display.id = "note" + noteCount;
        $("#note" + noteCount).text(note);

        //localStorage.setItem("noteCount", noteCount);
    }
});

#addContainer {
    margin: 20px 20px 50px 20px;
}

#displayContainer {
    margin: 20px 20px 20px 20px;
}

.noteDisplay {
    display: inline-block;
    color: white;
    background-color: #96c56f;
    width: 100%;
    padding: 5px, 0px, 5px, 0px;
    border: solid 2px black;
    border-radius: 5px;
    margin-bottom: 5px;
    word-wrap: break-word;
}

.textarea {
    width: 100%;
    height: 100%;
    font: 1em arial;
    color: rgba(50, 82, 50, 1.0);
}

.textarea:focus {
    color: rgba(50, 82, 50, 1.0);
    border: 2px solid #96c56f;
    box-shadow: 0px 1px 1px #888888;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-role="page" id="article1">
            <div data-role="header" data-theme="a" data-position="fixed">
                <h1>Notes</h1>
            </div>

            <div data-role="content">
                <div id="addContainer">
                    <button id="addNoteBtn" data-role="button">Add Note</button>
                    <textarea id="noteInput" class="textarea" rows="10" cols="50"></textarea>

                    <button id="savenotesbtn" data-role="button">Save</button>-->
                </div>
                <div id="displayContainer">
                </div>
            </div>

Answer 2

基于来自OP的评论，说它溢出到div的右侧，如果将word-break: break-all添加到noteDisplay规则，它将正确地断行

Updated fiddle

.noteDisplay {
    display: inline-block;
    color: white;
    background-color: #96c56f;
    width: 100%;
    padding: 5px, 0px, 5px, 0px;
    border: solid 2px black;
    border-radius: 5px;
    margin-bottom: 5px;
    word-break: break-all;          /*  added property  */
}

关于break-all和break-word之间的差异，当使用中文，日文和韩文输入文字时，最好使用break-all

在每一行上分发

Src：https://www.w3.org/TR/css-text-3/#break-all

Answer 3

word-wrap:break-word将解决问题。

将此添加到您的

.noteDisplay{word-wrap:break-word}

使div高度响应内容

尝试过的事情：

请求的完整示例

3 个答案:

这是工作示例