table表格中文字超出显示省略号

 

原理：

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

  1. table-layout: fixed 由于table-layout的默认值是auto，即table的宽高将取决于其内容的多寡，如果内容的体积无法估测，那么最终表格的呈现形式也无法保证了，fixed一下就好了。（注意：此样式是关键）
  2. white-space: nowrap 是为了保证无论单元格（TD）中文本内容有多少，都不会自动换行，此时多余的内容会在水平方向撑破单元格。
  3. overflow: hidden 隐藏超出单元格的部分。
  4. text-overflow: ellipsis 将被隐藏的那部分用省略号代替。
  5. 可设置 td 宽度属性为：width 或 max-width
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        table tbody td {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
</head>
<body>
 <table width="50%" border="1" style="table-layout:fixed;"> 
    <thead> 
        <th> 第一列 </th> 
        <th> 第二列 </th> 
    </thead> 
    <tbody> 
        <tr> 
            <td> 
                <span>超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容</span>
                <span>超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容</span> 
            </td> 
            <td> 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 </td> 
        </tr>
         </tbody> 
     </table>
</body>
</html
>

输出如下： 

 

posted on 2018-04-16 10:44  baoyadong  阅读(1396)  评论(0)    收藏  举报

导航