td之overflow:hidden 多余文本隱藏效果


td之overflow:hidden 多余文本隱藏效果

方法1: table-layout: fixed; width: 200px;

語法: table-layout : auto | fixed

  • auto : 默認的自動算法。布局將基於各單元格的內容。表格在每一單元格讀取計算之后才會顯示出來。速度很慢
  • fixed : 固定布局的算法。在這算法中,水平布局是僅僅基於表格的寬度,表格邊框的寬度,單元格間距,列的寬度,而和表格內容無關

隱藏對象內的多余文本,一般做法:

selector{ width:200px; white-space:nowrap; overflow:hidden; } 

但是這段代碼用在td上不會生效,單元格依然會被撐開~;
解決辦法:同時為其table定義width:*; table-layout : fixed OK:多余文本已經被自動隱藏。

<head>
    <title>回頭來看看Table:TD也玩overflow:hidden</title>
    <style type="text/css">
        table { width:500px;table-layout:fixed; }
        .col1 { width:100px; }
        .col2 { width:200px; }
        .col3 { width:100px; }
        td {white-space:nowrap;overflow:hidden;}
        </style>
    </head>
<body>
    <table border="1" cellspacing="0" summary="測試">
        <tr>
            <td class="col1"><strong>產品名稱</strong></td>
            <td class="col2"><strong>產品介紹</strong></td>
            <td class="col3"><strong>產品備注</strong></td>
        </tr>
        <tr>
            <td>神舟 優雅Q400N</td>
            <td><a href="shou_2.htm">優雅處理器優雅處理器優雅處理器優雅處理器優雅處理器優雅處理器優雅處理器優雅處理器優雅處理器優雅處理器優雅處理器優雅處理器優雅處理器優雅處理器優雅處理器優雅處理器優雅處理器優雅處理器優雅處理器優雅處理器</a></td>
            <td>迅馳4平台,突出的性價比,漂亮的外觀</td>
        </tr>
    </table>
</body>

方法2: 在td內加個div,td定義寬度,然后div只要定義高度就可以了。如:

    td{ width: 200px; }
    td .inner-div{ height:25px; line-height:25px;white-space:nowrap; overflow:hidden;  text-overflow:ellipsis; }


免責聲明!

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



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