zoukankan      html  css  js  c++  java
  • td之overflow:hidden 多余文本隐藏效果

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

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

    语法: table-layout : auto | fixed

    • auto : 默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢
    • fixed : 固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关

    隐藏对象内的多余文本,一般做法:

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

    但是这段代码用在td上不会生效,单元格依然会被撑开~;
    解决办法:同时为其table定义*; table-layout : fixed OK:多余文本已经被自动隐藏。

    <head>
        <title>回头来看看Table:TD也玩overflow:hidden</title>
        <style type="text/css">
            table { 500px;table-layout:fixed; }
            .col1 { 100px; }
            .col2 { 200px; }
            .col3 { 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{  200px; }
        td .inner-div{ height:25px; line-height:25px;white-space:nowrap; overflow:hidden;  text-overflow:ellipsis; }
  • 相关阅读:
    经典网址记录
    Python爬虫利器三之Xpath语法与lxml库的用法
    XPath 语法
    import,reload,__import__在python中的区别
    用redis实现队列实例
    代理池抓取基础版-(python协程)--抓取网站(西刺-后期会持续更新)
    selenuim&PhantomJS&Beautifulsoup练习经典实例
    Python面向对象编程(四)
    Python面向对象编程(三)
    Python面向对象编程(二)
  • 原文地址:https://www.cnblogs.com/stephenykk/p/5406609.html
Copyright © 2011-2022 走看看