这是代码,如果这样直接就被打开的话,IE下容器就会被撑破,FF下英文会会跳出容器
<!DOCTYPE HTML>
<div style='width:500px;height:200px;border:#ff0000 1px solid;'>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbb aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
百度搜索了一下,需要加上word-break或word-wrap,而且还需要加上overflow:hidden。
自己测试了一下,发现可以这样
<!DOCTYPE HTML>
<div style='width:500px;height:200px;border:#ff0000 1px solid;word-break:break-all;'>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbb aaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
只加上一个word-break:break-all;
就可以解决一长串英文的“不规矩”,但是使用word-break会出现这种情况。看我内容里面,有个bbbbbbb 使用word-break的时候是强制切断的,所以遇到换行的时候他看上去就不像是一个完整的单词,而是上面有一些,下面又有一些。这样不好
所以改用word-wrap:break-word;
<!DOCTYPE HTML>
<div style='width:500px;height:200px;border:#ff0000 1px solid;word-wrap:break-word;'>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbb aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
这样就OK了,IE,FF下都显示正常,而且不会撑破容器。
但是网上说的需要加个overflow:hidden,这个我不知道加在这里面对内容有什么用,加与不加不会影响里面的内容,只会说明容器是否能自动增长。
以上本人拙见,还请大牛们指点。