就下一行HTML内容去自动

我创建一个聊天应用程序，并在我动态填充消息在一个div就下一行HTML内容去自动

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

但问题是，如果消息太长，不继续下一行。我试过

white-space:normal;

但还没有运气呢。这里是虚拟Fiddle

来源

2014-01-15 Ajey

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

word-wrap:break-word

来源

2014-01-15 08:01:36 Jayson

DEMO

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

来源

2014-01-15 08:02:33 Anup

它的工作完美.... :) –

只使用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; 

来源

2014-01-15 08:04:30

，是什么字断和自动换行的区别？两者似乎都给出了相同的结果 – Ajey

@Ajey：请参考这篇文章http://stackoverflow.com/questions/1795109/what-is-the-difference-between-word-break-break-all-versus-word-wrap -打破 –

就下一行HTML内容去自动

回答

相关问题