日期:2014-05-17  浏览次数:20557 次

如何让html中的td自动换行,并在IE和firefox兼容

??? HTML中td元素的nowrap属性表示禁止单元格中的文字自动换行。但使用时要注意的是,td元素中nowrap属性的行为与td元素的width属性有关。如果未设置td宽度,则nowrap属性起作用的,如果设置了td宽度,则nowrap属性不起作用。

?

通过CSS让TD自动换行

项目中 ajax 应用需要动态创建element 但是在td内 内容过长 firefox 能自动换行,ie6 比较傻瓜的!可以如下设置TD的CSS即可实现

????? <td style="word-break:break-all">

????? 但是对于英文和数字来说,以上的设定在 IE6 下正常的换行,到了FireFox下不能换行了。因为word-wrap不是css2的标准属性,所以Mozilla不支持这个。很多人用overflow将撑出的部分隐藏或者加滚动条,但这样子肯定不是我们想到达到的效果,只能用JS实现换行。

????? 用代码实现

????? 无空格连续长字符,浏览器将它看成是一个长单词了,故实现不了自动换行,所以在你想换行的地方打个空格即可解决换行问题,用JS处理加入标点符号或者用空格隔开,就可以实现英文和数字的自动换行了。

????? 1. 用JS实现
????? <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;
??????????? }
??????????? function myLoad(){
????????????????? if(document.getElementById && !document.all)toBreakWord(24);
??????????? }
??????????? window.onload=function()
??????????? {
????????????????? myLoad();
??????????? }
????? </script>

????? 2. 在后台实现

??????? private string ToBreakWord(string strContent, int length)
??????? {
??????????? //如果为空,则返回空字符串
??????????? if (strContent == null)
??????????? {
??????????????? return String.Empty;
??????????? }
??????????? //如果长度不够,则直接返回
??????????? if (strContent.Length <= length)
??????????? {
??????????????? return strContent;
??????????? }
??????????? string strTemp = String.Empty;
??????????? //如果足够长,则在其中加入空格
??????????? while (strContent.Length > length)
??????????? {
??????????????? strTemp += strContent.Substring(0, length) + " ";
??????????????? strContent = strContent.Substring(length, strContent.Length-length);
??????????? }
??????????? strTemp += " " + strContent;
??????????? return strTemp;
??????? }