Question

[问题已解决!!!!!!]

自动换行：break-word 属性实际上正在与我合作。以前导致我无法工作的问题是我在标记中定义了 white-space：nowrap 属性，因此它们相互冲突。

这就是为什么!!

感谢观看这篇文章的所有人!!

自动换行：break-word ROCKS！

我有一个由div标签组成的聊天对话，而长字则从聊天窗口中删除

我用google搜索了一下解决方案，自动换行：break-word; 属性没有帮助。我也试过 overflow-wrap：break-word; 和 word-break：break-word;

我不知道我的聊天对话div有什么问题。

这是我的聊天对话div的css：

.chatboxcontent {
 height: 180px;
 padding: 7px;
 width: 226px;
 overflow: auto;
 line-height: 1.3em;
 background-color: rgba(24, 175, 223, 0.25);
     word-wrap: break-word;
}

这是我的聊天对话html标签：

<div class="chatboxcontent">
  I want to put my conversation here. 
the content is generated by javascript dynamically.
</div>

这是我生成对话的代码（可能是出错的部分???）

if(event.keyCode == 13 && event.shiftKey == 0)  {

    var $message = $(chatboxtextarea).val();
    $message = $message.replace(/^\s+|\s+$/g,"");

    $(chatboxtextarea).val('');
    $(chatboxtextarea).focus();
    $(chatboxtextarea).css('height','20px');
    if ($message != '') {

        $("#chatbox_"+name +" .chatboxcontent").append(myDate());
        $("#chatbox_"+name +" .chatboxcontent").append(username+': ');
        $("#chatbox_"+name +" .chatboxcontent").append($message);
        $("#chatbox_"+name +" .chatboxcontent").append("<br/>");

        // post content to server   
        $.post("sidechat/chat.php", {'from':username, 'to':indentedName, 'content':$message}, 
            function(data){
            //success function
            console.log("send message to db");
        });
    }

    return false;
}

我的问题是长字仍然从聊天窗口掉下来，好像word-wrap属性没有做任何事情。

需要帮助。

谢谢

更新------ 13年7月16日----------------

以下是jsFiddle的链接：http://jsfiddle.net/f62N9/

它似乎在jsFiddle上正常工作，但为什么它在我的localhost上什么都不做???

如何在聊天对话中强制换行？

0 个答案: