DIV里的文字会不受控制地换行，是为什么呢-优快云博客

本文介绍了如何使用CSS的word-wrap和word-break属性来控制文本换行，特别关注英文长串单词的换行处理，并提供了使用JavaScript辅助实现Firefox浏览器中长串英文自动换行的方法。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea </title>
<style type="text/css">
/* <![CDATA[*/
div {
      width:300px;
      word-wrap:break-word;
      border:1px solid red;
      }
/*]]>*/
</style>
</head>
<body>
<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div>
<script type="text/javascript">
//  <![CDATA[
function toBreakWord(intLen){
var obj=document.getElementById("ff");
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+" ";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+=" "+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById  &&  !document.all)  toBreakWord(37)
// ]]>
</script>
</body>
</html>
是js控制英文换行的！

marging 和padding设置为0

关于word-wrap和word-break的区别

word-wrap是控制换行的。
使用break-word时，是将强制换行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。

break-word是控制是否断词的。
normal是默认情况，英文单词不被拆开。
break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。
keep-all，是指Chinese, Japanese, and Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。（英文语句正常。）

用word-wrap:break-word; overflow:hidden;在 IE 下没有任何问题，在 FF 下，长串英文会被遮住超出的内容。
目前对于firefox浏览器来说，如果是英文字符还没找到有效的自动换行方法，只有通过JS代码解决

转载于:https://www.cnblogs.com/liufei88866/archive/2008/09/03/1283063.html