强制div中的换行符

Question

我在div中进行了一次聊天对话，但很长的话都说不出来了。我被建议使用i-frame，但是怎么样？我认为这是针对外部网站的。

jsFiddle Code

CSS

.chat{
   width: 230px;
   height: 310px;
   margin-left: 10px;
   background-color: grey;
   border: solid 1px black;
   color: #1855a3;
   overflow-y: scroll;
}

Answer 1

尝试在您的css中添加word-wrap:break-word;

Answer 2

添加CSS规则：word-break:break-word;

<强> jsFiddle example

Answer 3

使用word-wrap: break-word; - 适用于所有浏览器。

http://jsfiddle.net/adamh/TWsqQ/5/

Answer 4

我相信你要做的是阻止水平滚动。

您可以使用overflow-x: hidden;和word-wrap: break-word;轻松完成此操作，以便长字会突破为新行。

<强> CSS：

.chat{
   width: 230px;
   height: 310px;
   margin-left: 10px;
   background-color: grey;
   border: solid 1px black;
   color: #1855a3;
   overflow-y: scroll;
   overflow-x: hidden;
   word-wrap: break-word;
}

在此处查看示例： http://jsfiddle.net/TWsqQ/10/