使html内容自动转到下一行

Question

我正在创建一个聊天应用程序，我正在动态填充div中的消息

$('#conversation').append('<div class="message"><span><b>'+username+': </b>' + data + '</span></div>');

但问题是如果消息太长，它就不会进入下一行。我试过

white-space:normal;

但还没有运气。 这是假Fiddle

Answer 1

DEMO

.message {
    white-space: normal;
    word-break: break-all;
}

Answer 2

我认为您要添加的CSS样式是

word-wrap:break-word

Answer 3

我认为，您应该使用以下代码编辑代码：

span{display:inline-block;}

Answer 4

只需使用word-break: break-word;

DEMO

 .message {
        white-space:normal;
        word-break: break-word;
    }

指 http://css-tricks.com/almanac/properties/w/word-break/

http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

提示：

  

它也经常与连字符属性一起使用   根据书中的标准，当发生断裂时会插入一个大肆宣传。

     -ms-word-break: break-all;
     word-break: break-all;

     // Non standard for webkit
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;