zoukankan      html  css  js  c++  java
  • CSS 实现表格内容超出用省略号显示 确实可用, 转 但证明过~

    复制代码
    table{
    
      table-layout: fixed;
    
    }
    
    td{
    
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    
    }
    复制代码

    原理:

    本方法用于解决表格单元格内容过多时的美观问题,主要涉及到4句CSS样式:

    1. table-layout: fixed 由于table-layout的默认值是auto,即table的宽高将取决于其内容的多寡,如果内容的体积无法估测,那么最终表格的呈现形式也无法保证了,fixed一下就好了。(注意:此样式是关键)

    2. white-space: nowrap 是为了保证无论单元格(TD)中文本内容有多少,都不会自动换行,此时多余的内容会在水平方向撑破单元格。

    3. overflow: hidden 隐藏超出单元格的部分。

    4. text-overflow: ellipsis 将被隐藏的那部分用省略号代替。


    效果图:

    源代码:

    复制代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
        <style type="text/css">
            table
            {
                table-layout: fixed;
                width: 100%;
            }
            
            td
            {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                background-color: #ccc;
            }
        </style>
    
    </head>
    <body>
        <table>
            <thead>
                <th>
                    第一列
                </th>
                <th>
                    第二列
                </th>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <span>超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容</span><span>超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容</span>
                    </td>
                    <td>
                        超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>
    复制代码

    兼容性:

    Internet Explorer 6, 7, 8, 9及以上版本

    FireFox 最新版

    Chrome 最新版

  • 相关阅读:
    通过HttpListener实现简单的Http服务
    WCF心跳判断服务端及客户端是否掉线并实现重连接
    NHibernate初学六之关联多对多关系
    NHibernate初学五之关联一对多关系
    EXTJS 4.2 资料 跨域的问题
    EXTJS 4.2 资料 控件之Grid 那些事
    EXTJS 3.0 资料 控件之 GridPanel属性与方法大全
    EXTJS 3.0 资料 控件之 Toolbar 两行的用法
    EXTJS 3.0 资料 控件之 combo 用法
    EXTJS 4.2 资料 控件之 Store 用法
  • 原文地址:https://www.cnblogs.com/henw/p/2491625.html
Copyright © 2011-2022 走看看