在div中强制换行[重复]

【问题标题】：Force a line break in a div [duplicate]在div中强制换行[重复]
【发布时间】：2013-05-27 13:01:09
【问题描述】：

我在一个 div 中进行了一次聊天对话，但掉出了很长的词。有人建议我使用 i-frame，但是如何使用？我以为这是针对外部网站的。

CSS

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

【问题讨论】：

@wesley - 我在阅读了重复的建议后删除了评论。看起来好多了

标签： html css

【解决方案1】：

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

【讨论】：

这很酷，谢谢！

【解决方案2】：

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

jsFiddle example

【讨论】：

与建议的副本相同。

【解决方案3】：

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

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

【讨论】：

与建议的副本相同。

【解决方案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/

【讨论】：