• textoverflow: ellipsis 在IE8、9下显示问题


    通过样式可以使在table中如果td中的内容过长时,过长的部分显示为省略号。

    如下图所示:

    image

    样式也很简单,代码如下:

    <!DOCTYPE html>
    
    
    <html>
    <head>
        <title>New Document </title>
        <style>
            .ctl {
                table-layout: fixed;
            }
    
                .ctl td {
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    padding: 2px;
                }
        </style>
    
    </head>
    
    <body>
        <table cellspacing="0" cellpadding="1" width="100%" class="ctl" border="1">
            <colgroup>
                <col>
                <col width="100">
            </colgroup>
            <tbody>
                <tr>
                    <td>内容还不算很长很长</td>
                    <td>内容比较短</td>
                </tr>
                <tr>
                    <td>内容很长很长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长</td>
                    <td>内容比较短</td>
                </tr>
                <tr>
                    <td>内容很长很长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长</td>
                    <td>内容比较短</td>
                </tr>
                <tr>
                    <td>内容很长很长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长</td>
                    <td>内容比较短</td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>
    

      

    现在的实现在IE8或者9下,如果以内容字母开头,显示效果就会出现不一致的情况。效果如下:

    image

    看来IE自动识别的字体。

    如果为设置字体后呢,先设置为font-family:宋体;效果如下:

    image

    设置为font-family:Arial;效果如下:

    image

    如果要想保证效果统一,必须要设置字体,而且必须要设置为中文字体了。

    qishichang

  • 相关阅读:
    shell脚本简单调试
    计算机揭秘之:网络分类和性能分析
    centos 7 虚拟机忘记密码
    算法时间复杂度计算
    strace命令 linux下调试神器
    Linux下core dump (段错误)
    dmesg + addr2line查看堆栈错误位置
    镜像 开源网站
    C语言---链表(包括学习过程中的思想活动)
    The C compiler "/usr/bin/cc" is not able to compile a simple test program. 解决方法
  • 原文地址:https://www.cnblogs.com/qishichang/p/2748630.html
Copyright © 2020-2023  润新知