4行CSS实现表格内容超过一行的部分，用省略号代替

jackjobs

浏览: 556753 次
性别:
来自: 武汉

最近访客更多访客>>

钱小白

yzjd19900517

szjszj

suncathay

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Html代码

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将被隐藏的那部分用省略号代替。

效果图：

源代码：

Html代码

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<styletype="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>