如何在HTML中自动换行文字？

怎么样的文字aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa超过div(比方说200px)的宽度？

我对任何类型的解决方案都很开放,比如CSS,jQuery等.

1> Alan Haggai ..：

---

试试这个:

div {
    width: 200px;
    word-wrap: break-word;
}

---

自动换行:break-word; 不起作用尝试断言:打破所有;/*这个是杀手*/

---

这是CSS3,但它适用于几乎所有主流浏览器,包括IE5.5 - > 9 - http://caniuse.com/#search=word-wrap

---

**重要:**它是`word-break:break-all`而不是`word-wrap:break-all`.容易犯错误

2> lukaserat..：

---

在bootstrap 3上,确保空白区域未设置为"nowrap".

div {
  width: 200px;
  word-break: break-all;
  white-space: normal;
}

---

很好,我需要`white-space:normal;`在它工作之前.

3> Kim Stebel..：

---

您可以像这样使用软连字符:

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

这将显示为

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

如果包含的盒子不够大,或者如果

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

如果是.

---

但你怎么知道在哪里把'&害羞;`？

---

正是我在寻找什么.我喜欢它做任何事都太害羞,直到它必须;-)

---

但是如同示例中的那个乱码呢？可以把'aaaaaa ... aaaaa`变成'a­ a­ a­ a­ a­ a­ a ... a­ a­ a­ a`？

---

如果要包装的单词是overly.long.java.package.name或一些带有许多点的类似字符串,这样可以正常工作.然后你可以添加&害羞; 每个点后.

4> Orr Siloni..：

---

   div {
    // set a width
    word-wrap: break-word
}

' word-wrap'解决方案仅适用于IE和浏览器支持CSS3.

最好的跨浏览器解决方案是使用您的服务器端语言(PHP或其他)来定位长字符串并定期在其中放置html实体​ 这个实体可以很好地打破长字,并适用于所有浏览器.

例如

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

---

"在它们内部定期放置html实体#8203"但是当你尝试复制文本并将其粘贴到某个地方时,你会在中间有一个随机的Unicode字符

5> Amol..：

---

这对我有用

word-wrap: normal;
word-break: break-all;
white-space: normal;
display: block;
height: auto;
margin: 3px auto;
line-height: 1.4;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

6> 小智..：

---

如果单词中没有空格(例如长URL),那么唯一可以在IE,Firefox,chrome,safari和opera中使用的是:

div{
    width: 200px;  
    word-break: break-all;
}

我发现这是防弹的.

7> Andrew Marai..：

---

另一个选择也是使用:

div
{
   white-space: pre-line;
}

这将在所有支持CSS1的浏览器中设置所有div元素(这几乎是所有常见的浏览器,早在IE 8)