text-overflow: ellipsis 在IE8、9下显示问题

最新推荐文章于 2019-11-09 16:06:57 发布

dengqi4009

最新推荐文章于 2019-11-09 16:06:57 发布

阅读量276

点赞数

原文链接：http://www.cnblogs.com/qishichang/archive/2012/10/31/2748630.html

版权

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

如下图所示：

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

<!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下，如果以内容字母开头，显示效果就会出现不一致的情况。效果如下：