Javascript 使div高度响应内容_Javascript_Jquery_Css

Javascript 使div高度响应内容

javascript jquery css

Javascript 使div高度响应内容,javascript,jquery,css,Javascript,Jquery,Css,我有一个div正在使用.text（）方法填充，但是当我输入一个长文本条目时，div的高度没有响应，文本溢出div 我有一个textarea和一个按钮，当按下按钮时，文本区域的值被插入到div中图片：尝试过的事情：应要求提供完整示例 HTML: JS: 尝试换行：断开单词对于css，应该可以做到这一点（提供html代码和溢出文本的图像会很有用）您需要了解的关于css中溢出的所有信息，可以在此处找到：下面是一个工作示例 $（文档）.ready（函数（）{ var savesnotesb

我有一个

div

正在使用.text（）方法填充

，但是当我输入一个长文本条目时，div的高度没有响应，文本溢出div

我有一个textarea
和一个按钮，当按下按钮时，文本区域的值被插入到div中
图片：
尝试过的事情：
应要求提供完整示例
HTML:
JS:
尝试换行：断开单词
对于css，应该可以做到这一点
（提供html代码和溢出文本的图像会很有用）
您需要了解的关于css中溢出的所有信息，可以在此处找到：
下面是一个工作示例

$（文档）.ready（函数（）{
var savesnotesbtn=document.getElementById（“savenotesbtn”）；
var addnotebtn=document.getElementById（“addnotebtn”）；
//var notecont=localStorage.getItem（“notecont”）；
如果（noteCount==null）{
var noteCount=0；
}
addnotebtn.addEventListener（“单击”，addNotes）；
//添加注释
函数addNotes（）{
noteCount++；
var note=$（“#noteInput”）.val（）；
//控制台日志（“注意：+注意）；
//日志（“Note Count:+Note Count”）；
var display=document.createElement（“div”）；
document.getElementById（“displayContainer”）.appendChild（display）；
display.className=“noteDisplay”；
display.id=“note”+记事本计数；
$（“#注”+注数）；
//setItem（“noteCount”，noteCount）；
}
});
#添加容器{
利润率：20px 20px 50px 20px；
}
#显示容器{
保证金：20px 20px 20px 20px；
}
.noteDisplay{
显示：内联块；
颜色：白色；
背景色：#96c56f；
宽度：100%；
填充：5px，0px，5px，0px；
边框：纯色2px黑色；
边界半径：5px；
边缘底部：5px；
单词包装：打断单词；
}
.文本区{
宽度：100%；
身高：100%；
字体：1em arial；
颜色：rgba（50,82,50,1.0）；
}
.text区域：焦点{
颜色：rgba（50,82,50,1.0）；
边框：2个实心#96c56f；
盒影：0px 1px 1px#8888888；
}

笔记
添加注释
保存-->
根据OP的一条评论，它说它溢出到div的右侧，如果在注释显示
规则中添加单词break:break all
，它将正确地断行


关于break all
和break word
之间的差异，当以中文、日文和韩文输入文本时，最好使用break all
将其分布在每一行上
Src:
换行：断开单词将解决问题。
将此添加到您的
.notesplay{word wrap:break word}
提供html工具或工作示例将很快添加，谢谢您的jquery代码不工作。。请提供一个完整的工作示例。@SahilDhir现在应该是所有内容，我唯一删除的内容是页脚导航和其他页面。它是如何溢出的。。在底部，右边…？更像是一个评论。使用评论区。然后尝试获得一些重复，然后尝试评论。你可以给出更好的答案，问一些能让你获得一些重复的问题。两个正确的答案，所以谢谢你们，只能接受一个深思熟虑的人：）：）接受@Xongoanswer@EthanBristow不客气，如果用户使用中文、日文和韩文写作，您需要使用我在回答中使用的全部破译，由于中断单词将无法正常工作
Height: auto;
display: inline-block;
overflow: visible/auto; etc

<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>

#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;
}

$(document).ready(function() {
    var savesnotesbtn = document.getElementById("savenotesbtn");
    var addnotebtn = document.getElementById("addNoteBtn");

    var noteCount = localStorage.getItem("noteCount");

    if (noteCount === null) {
        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);
    }
});

.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  */
}