CSS實例：如何讓無空格的長字符在IE和FF下面實現(xiàn)自動換行？_DIV+CSS實例
教程Tag：暫無Tag,歡迎添加,賺取U幣!
無空格連續(xù)長字符在IE與FF下有時候能實現(xiàn)自動換行，因為瀏覽器將它看成是一個長單詞了。IE下很簡單，給容器比如一個p定義word-wrap屬性即可：
對于firefox，至少現(xiàn)在用CSS是沒有辦法解決的，大多數(shù)是用overflow將撐出的部分隱藏或者加滾動條，因為word-wrap不是css2的標(biāo)準(zhǔn)屬性，所以Mozilla不支持這個。既然CSS無法做到，那么只有使用JS的方法了。
首先給這個容器p一個ID“#hh”，然后在頁面中插入一段JS：
其中最后一句括號中的(40)是每行的字母的數(shù)目，不過它不能分辨每個詞的長度，就是說英文單詞會全部被截斷，不管是不是連續(xù)的長字符，這不符合書寫習(xí)慣也不利于閱讀，但是這是偶找到比較好的解決辦法。
示例代碼 [m.dounai2.com]
p {word-wrap:break-word;}
對于firefox，至少現(xiàn)在用CSS是沒有辦法解決的，大多數(shù)是用overflow將撐出的部分隱藏或者加滾動條，因為word-wrap不是css2的標(biāo)準(zhǔn)屬性，所以Mozilla不支持這個。既然CSS無法做到，那么只有使用JS的方法了。
首先給這個容器p一個ID“#hh”，然后在頁面中插入一段JS：
示例代碼 [m.dounai2.com]
<script type="text/javascript">
function toBreakWord(intLen){
var obj=document.getElementById("hh");
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(40)
</script>
function toBreakWord(intLen){
var obj=document.getElementById("hh");
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(40)
</script>
其中最后一句括號中的(40)是每行的字母的數(shù)目，不過它不能分辨每個詞的長度，就是說英文單詞會全部被截斷，不管是不是連續(xù)的長字符，這不符合書寫習(xí)慣也不利于閱讀，但是這是偶找到比較好的解決辦法。
相關(guān)DIV+CSS實例：
- 固定div容器的寬高，圖片居中（圖片不限制大小）
- 用css制作有滾動條的居中彈出框
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- 10個很酷的涂鴉風(fēng)格國外網(wǎng)店設(shè)計展示
- jquery模擬瀏覽器滾動條效果
- 仿谷歌google的搜索框下拉提示列表效果
- JS顯示網(wǎng)頁最后更新時間
- CSS技巧：text-indent隱藏文字(以圖換字)
- CSS實例：三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS布局實例：很實用的圖文混排CSS列表-富有語義
- DivCSS實例：CSS菜單Flash效果用圖片模擬實現(xiàn)
- DivCSS布局實例用dldtdd來制作列表
- 相關(guān)鏈接：
- 教程說明：
DIV+CSS實例-CSS實例：如何讓無空格的長字符在IE和FF下面實現(xiàn)自動換行？
。