javascript - 如何将文本保留在一个div中

标签 javascript jquery html css twitter-bootstrap

我有一个基本的聊天 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("");
    }
});

这是长消息的样子。

problem

另外,请注意下一行的 k 开头,我怎样才能让它们紧跟在冒号之后。顺便说一句,我正在使用 Bootstrap 。

最佳答案

word-break: break-all; 添加到包含溢出文本的元素。

https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

关于javascript - 如何将文本保留在一个div中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31838477/

相关文章:

javascript - Webpack 'vue-loader' 编译问题与 '@vue/compiler-sfc'

javascript - 检测小时的事件监听器

javascript - 将 XML 转换为 JavaScript 对象

javascript - 如何在我的 html 页面底部删除多余的空白空间和滚动条?

javascript - 在特定的 div 中加载第二个内容 onclick

javascript - 如何声明 JavaScript 和 CSS XHTML 兼容?

javascript - 如何打包带有可选子模块的 Node 模块?

javascript - 为什么链接需要在手机上双击才能进入链接?

javascript - 表格行的 SlideToggle

html - 如何仅使用标记和 CSS 在两列中打印 html 列表?