我有一个 div 正在使用 .text() 方法填充，但是当我输入一个长文本条目时，div 的高度没有响应并且文本溢出 div。
我有一个 textarea 和一个按钮，当按下按钮时，文本区域的值被插入到 div 中。
尝试过的事情:
Height: auto;
display: inline-block;
overflow: visible/auto; etc
根据要求提供完整示例
HTML:
<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>
CSS:
#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;
}
JS:
$(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);
}
});
最佳答案
尝试使用 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>关于javascript - 使div高度响应内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43255031/