`

长串英文数字强制折行问题

阅读更多
DIV+CSS:长串英文数字强制折行问题

在网站实际应用中,经常会遇到英文数字长串后不折行的bug,利用CSS可以解决这个问题。

< style type=”text/css”>
< !–
div {
width:300px;
word-wrap:break-word;
border:1px solid red;
}
–>
< /style>
< div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa…..< /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>

火狐下利用js解决

 white-space: pre; /* CSS2 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics