• 【CSS】关于IE、FireFox中table强制换行的总结


        关于一个表格中,一个无空格的长串字母不换行的问题,已经是比较常见的问题了。我从网络上找到的强制换行的方法,有的仅仅是针对IE的,对于FireFox换行,要么是通过JS把连续的字母添加空格或换行符,要么就是用overflow:hidden来限制。但是这样都不好,前者稍微麻烦了些,对于很多数据的情况,多少会影响一些速度。后者也不好,这样做,多余的文字就看不到了,只能保证整体结构不变。

        要解决这个问题,先来看这两个属性: word-break和word-wrap。其中word-break指的是一个英文单词是否可以被切割。而word-wrap是指该容器中的文本在达到边界时采取什么方式处理。所以这两个属性还是有区别的。需要说明的是,word-wrap各个浏览器都是支持的,但是word-break不是w3c指明的标准,因此,FireFox对word-break不支持。

        现在来总结下如何能够强制浏览器换行显示(这里针对table中的某一个td)。这里先给出一个基本的table结构,所有的方法都针对该结构进行处理

    <table border="1">
        <tbody>
        <tr>
            <td style="100px;">ddddddddddddddddddddddddddddddddddddddd</td>
        </tr>
        </tbody>
    </table> 

        首先是IE6,7:在td样式中加入:word-wrap:break-word;这样,就可以达到我们的目的了。

     

        然后是IE8,9:在td样式加入:word-wrap:break-word; word-break:break-all; 这样,IE89就可以实现换行了,于此同时,Chrome和Safari也可以实现强制换行了。

     IE67也可以的,简单说明下为什么要加上word-break,这是因为,连续的字母浏览器会认为这个是一个完整单词,因此,浏览器默认的处理方式是不可以将单词拆开,因此,word-wrap就无效了。

        最后是FireFox,word-wrap在table中和在div中完全不同,经过我自己的实践,word-wrap在块元素中可以优先考虑边界而不是里面的文本,因此,如果一个连续的字母文本在一个固定宽度的块元素中时,是可以被强制换行拆开的。因此,在这里的解决办法是:将td转化成块元素,完整的样式为:word-wrap:break-word; word-break:break-all; display:block;

    一切都完美了,因此,针对表格td中的过长文本,我们可以使用这个来实现各个浏览器的兼容:word-wrap:break-word; word-break:break-all; display:block;

        当然,这里面也有个缺点,因为display将td变成块元素了,因此会出现一些其他的问题(td默认的是table-cell),因此,如果你不能修改td的话,那就在td中加一个div,然后在div中添加这个文字,这样,就可以了。

  • 相关阅读:
    Linux目录树与磁盘分区
    私有服务器外网访问zerotier解决方案
    ubuntu防火墙相关
    “ssh协议”简单使用
    Ubuntu软件安装小记
    怎么说服领导,能让我用DDD架构肝项目?
    金3银4面试前,把自己弄成卷王!
    开发 IDEA Plugin 引入探针,基于字节码插桩获取执行SQL
    《重学Java设计模式》作者开始录视频了!
    《Mybatis 手撸专栏》第1章:开篇介绍,我要带你撸 Mybatis 啦!
  • 原文地址:https://www.cnblogs.com/echoloyuk/p/2499708.html
Copyright © 2020-2023  润新知