我有一个基本的聊天 html 页面。当用户提交消息时,我会显示用户的用户名,后跟一个冒号,然后是消息。如果消息真的很长,文本会超出 div 元素。我该如何防止这种情况?这是表格。
<div class="col-sm-8">
<div id="chatArea">
</div>
<form role="form" id="userInput">
<button id="endChat" type="button" class="btn btn-danger">Esc</button>
<button id="sendMessage" type="submit" class="btn btn-info">Send</button>
<div class="form-group">
<textarea class="form-control" rows="5" id="messageArea"></textarea>
</div>
</form>
</div>
这里是jquery
$("#messageArea").keypress(function(e) {
if (e.which == 13) {
$("#userInput").submit();
}
});
$("#userInput").submit(function(e) {
e.preventDefault();
var message = $("#messageArea").val();
if (message === ""){
return;
} else {
$("#chatArea").append("<p id='chatmessage'>" + username + " : " + message + "</p>");
$("#messageArea").val("");
}
});
这是长消息的样子。
另外,请注意下一行的 k 开头,我怎样才能让它们紧跟在冒号之后。顺便说一句,我正在使用 Bootstrap 。
最佳答案
将 word-break: break-all;
添加到包含溢出文本的元素。
关于javascript - 如何将文本保留在一个div中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31838477/