在容器的css中加word-break:break-all;
语法:
word-break : normal | break-all | keep-all
取值:
normal : 默认值。允许在词间换行
break-all : 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的 normal 相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
语法:
word-wrap : normal | break-word
取值:
normal : 默认值。允许内容顶开指定的容器边界
break-word : 内容将在边界内换行。如果需要,词内换行( word-break )也将发生
MOZ(firefox)
用js截取字符串强制换行。
js插入 来解决
<script type="text/javascript">
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(13)
</script>
全部代码
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0px;padding:0px;}
div{width:1000px;height:200px;background:#666;padding:15px;}
div p{float:left;width:100px;word-break:break-all; word-wrap:break-word; margin-right:20px;background:#fff;padding:5px;}
h1{font-size:12px;}
</style>
</head>
<body>
<h1>当容器有固定的宽度的时候,文字大于容器宽度的时候会自动折行,但是字母和数字的时候并不会折行,而是在一行显示下去,如何解决。<br/>
ie:在容器的css中加word-break:break-all;<br/>
moz:用js截取字符串强制换行。
</h1>
<div id="ff">
<p>111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p>
<p>222222222222222222222222222222222222</p>
<p>与所有非亚洲语与所有非亚洲语与所有非亚洲语与所有非亚洲语与所有非亚洲语</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>5</p>
</div>
</body>
</html>
<script type="text/javascript">
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(13)
</script>
语法:
word-break : normal | break-all | keep-all
取值:
normal : 默认值。允许在词间换行
break-all : 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的 normal 相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
语法:
word-wrap : normal | break-word
取值:
normal : 默认值。允许内容顶开指定的容器边界
break-word : 内容将在边界内换行。如果需要,词内换行( word-break )也将发生
MOZ(firefox)
用js截取字符串强制换行。
js插入 来解决
<script type="text/javascript">
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(13)
</script>
全部代码
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0px;padding:0px;}
div{width:1000px;height:200px;background:#666;padding:15px;}
div p{float:left;width:100px;word-break:break-all; word-wrap:break-word; margin-right:20px;background:#fff;padding:5px;}
h1{font-size:12px;}
</style>
</head>
<body>
<h1>当容器有固定的宽度的时候,文字大于容器宽度的时候会自动折行,但是字母和数字的时候并不会折行,而是在一行显示下去,如何解决。<br/>
ie:在容器的css中加word-break:break-all;<br/>
moz:用js截取字符串强制换行。
</h1>
<div id="ff">
<p>111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p>
<p>222222222222222222222222222222222222</p>
<p>与所有非亚洲语与所有非亚洲语与所有非亚洲语与所有非亚洲语与所有非亚洲语</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>5</p>
</div>
</body>
</html>
<script type="text/javascript">
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(13)
</script>