text-overflow: 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

如果要想保證效果統一,必須要設置字體,而且必須要設置為中文字體了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM