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 最新版

  • 相关阅读:
    网页中插入Flash动画(.swf)代码和常用参数设置
    关于UML中逻辑模型的工具的详细介绍
    简单CSS hack:区分IE6、IE7、IE8、Firefox、Opera
    mysql sock找不到
    简述nginx日志管理切割日志(亲测可行)
    Linux下使用rm删除文件,并排除指定文件(亲测可行)
    常驻内存以及如何避免内存泄漏
    TASK异步进程处理场景
    TCP长连接数据传输(同步方式)
    在智联上投了一个月的简历,很多都有意向,但是却没有通知我去
  • 原文地址:https://www.cnblogs.com/henw/p/2491625.html
Copyright © 2011-2022 走看看