`

如何让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;
        }

1
1
分享到:
评论

相关推荐

    支持IE和FF同时自动换行

    本文将详细介绍一种通过使用`&lt;table&gt;`标签结合特定CSS属性的方式,来实现文本在Internet Explorer (IE) 和 Firefox (FF) 等浏览器中的自动换行效果。 #### 二、核心概念和技术背景 ##### 2.1 CSS自动换行相关属性 ...

    兼容多浏览器,兼容 div、p、td 的强制不换行及强制换行.

    1. **Firefox** 和 **IE** 对于 `div` 和 `td` 元素的行为较为一致: ```css div, td { white-space: nowrap; } ``` 此设置对于未指定宽度的`td`同样有效。 2. **IE** 中对于指定了宽度的`td`,如果文本中...

    CSS自动换行

    本文将深入探讨五种不同的自动换行策略,这些策略不仅能够满足基本的自动换行需求,更重要的是它们具有良好的浏览器兼容性,能够在IE、Chrome和Firefox等主流浏览器中稳定运行。 ### 一、使用`white-space`和`word-...

    通过css样式控制单元格内超长文本自动换行.doc

    在实际开发中,我们可能会遇到不同的浏览器兼容问题,例如 Firefox 和 IE 的行为不同。因此,我们需要格外小心地处理这些问题,以确保我们的代码可以在不同的浏览器中正常工作。 使用 CSS 样式控制单元格内超长文本...

    css之自动换行.pdf

    本文主要探讨如何使用CSS来解决自动换行的问题,特别是针对IE和Firefox浏览器的差异。 首先,块级元素如`div`和`p`默认具有`white-space:normal`属性,这意味着当定义了宽度后,内容会根据需要自动换行。例如: ``...

    如何实现FireFox文本自动换行

    本文将详细讲解如何在Firefox中实现文本自动换行。 一、CSS方法:通用方案与针对IE的优化 在Internet Explorer(IE)浏览器中,可以通过CSS属性`word-wrap`和`word-break`来实现文本自动换行。这两个属性可以帮助你...

    css控制文字自动换行的实现方法

    而Firefox浏览器则需要在`&lt;td&gt;`和`&lt;th&gt;`元素内使用`word-break:break-all;`或`word-wrap:break-word;`属性来实现换行,如果要隐藏超出的内容,则可以使用`overflow:hidden;`属性。 例如,对于IE浏览器: ```html ...

    css之自动换行实现代码

    在某些极端情况下,比如需要在Firefox中对`td`或`th`内的文本实现换行同时隐藏超出部分,可能会遇到`overflow: hidden;`不生效的情况。在这些情况下,我们可以考虑使用`overflow: auto;`或者不使用`overflow`属性...

    css实现连续的英文或数字自动换行的方法

    对于Firefox浏览器,在表格布局中,即使使用了百分比来定义单元格宽度,实现连续的英文或数字换行仍然是个挑战。在这种情况下,可以通过将内容包裹在div中,并给div添加`overflow:hidden;`属性来隐藏溢出的部分。...

    css自动换行 防止撑破div影响排版

    4. 对于表格单元格(`td`和`th`)内的内容,可以在IE浏览器中使用`word-wrap`和`word-break`属性。而在Firefox中,则需要结合`word-break`和`overflow`属性来隐藏超出边界的文本。 总结来说,通过合理使用CSS中的`...

    CSS实现table td中文字的省略与显示(兼容IE与FF、Chrome)

    CSS提供了优雅的方式来实现这一功能,同时兼容不同的浏览器,包括Internet Explorer (IE),Firefox以及Chrome。这里我们将详细探讨如何实现这一效果。 首先,我们来看标题和描述中提到的关键CSS属性: 1. `...

    前端处理浏览器兼容问题

    **问题**:在Opera和Firefox中,`&lt;td&gt;`的高度包含了`border`的宽度。 **解决方法**:通过设置`line-height`和`height`相等来统一表现。 ```css td { height: 30px; line-height: 30px; } ``` #### 八、div嵌套p...

    浏览器兼容问题

    **问题描述**:在 Opera 和 Firefox 中,`td` 的高度包含边框宽度,但在其他浏览器中并不包含。 **解决方案**:设置 `line-height` 和 `height` 相同。 ```css .table-cell { line-height: 20px; height: 20px; ...

    用CSS控制表格或单元格强制换行,防止表格被英文单词或中文撑大

    然而,在Firefox浏览器中,连续的英文字符和阿拉伯数字的断行问题并未得到解决。此时,我们可以选择隐藏超出边界的字符,或者为容器添加滚动条: ```css #wrap { word-break: break-all; width: 200px; overflow...

    CSS超出文本指定宽度用省略号代替和文本不换行

    请注意,这种方法在非Webkit浏览器(如Firefox、IE)中可能无法正常工作,因此在实际应用中可能需要结合JavaScript库或条件注释来实现兼容性。 总结,通过CSS的`text-overflow: ellipsis`、`overflow: hidden`和`...

    HTML全套学习资料

    10. **浏览器兼容性**:了解各主流浏览器(如Chrome、Firefox、Safari、Edge和IE)对HTML和CSS的支持情况,学习如何使用条件注释和polyfill技术处理兼容问题。 11. **实例分析**:通过实际案例学习HTML的运用,例如...

    HTML 自动伸缩的表格Table js实现

    HTML表格(Table)在网页设计中常常用于展示结构化数据,但它们存在一个常见的问题,即如果表格单元格(TD)中的内容过多,导致内容换行,整个表格的美观度会受到影响。为了解决这个问题,我们可以利用JavaScript...

Global site tag (gtag.js) - Google Analytics