css实现表格内容过长省略号代替的方法

发布时间:2020-09-22编辑:脚本学堂
表格内容过长时怎么办呢?前面讲过超过宽度显示省略号,本文讲在表格内文字过长时以省略号代替。大家可以看一下两文章有哪些不同。

Html代码
 

复制代码 代码示例:
1.<html>
2.<head>
3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
4.<style type="text/css">
5.table{
6.table-layout: fixed
7.}
8.td {
9.text-overflow:ellipsis;
10.overflow: hidden;
11.}
12.span {
13.display:block;
14.overflow:hidden;
15.white-space:nowrap;
16.text-overflow:ellipsis;
17.}
18.</style>
19.</head>
20.<body>
21.<table border="1" width="300px" >
22.<tr >
23.<td>fffffffffffffffffff!</td>
24.<td title="">cccccccccccccc</td>
25.<td><span title="aa">1233333333123333333312333333333</span></td>
26.<td>1233333333123333333312333333333</td>
27.<td>1233333333123333333312333333333</td>
28.</tr>
29.</table>
30.<body>
31.</html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
table{
table-layout: fixed
}
td {
text-overflow:ellipsis;
overflow: hidden;
}
span {
display:block;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
</style>
</head>
<body>
<table border="1" width="300px" >
<tr >
<td>fffffffffffffffffff!</td>
<td title="">cccccccccccccc</td>
<td><span title="aa">1233333333123333333312333333333</span></td>
<td>1233333333123333333312333333333</td>
<td>1233333333123333333312333333333</td>
</tr>
</table>
<body>
</html>


参数:clip :  不显示省略标记(...),而是简单的裁切
ellipsis :  当对象内文本溢出时显示省略标记(...)
说明:设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
这里讲的是在表格中文字过长省略号代替,前面有关文章讲超过宽度显省略号,有兴趣的朋友可以看看这些文章。