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