表格单元格内容超出时显示省略号效果(实现代码)

说明

在前端开发中，经常会遇到需要限制单元格宽度并且内容超出部分显示省略号的的情况。下面就简单的介绍下如何达到这种效果。

准备知识

1. 控制文本不换行

white-space: nowrap;

2. 超出长度时，出现省略号

overflow:hidden;

text-overflow:ellipsis

3. 修改表格布局算法

table-layout:fixed;table-layout的默认值为automatic，意思是列宽度由单元格内容设定。而fixed意思是列宽由表格宽度和列宽度设定。

也就是说当你给表格设定列宽时，实际情况是不起作用的，当单元格内容过多时，依然会把宽度撑开。如果需要让表格的列宽显示方式由自己给单元格定义的列宽决定，就必须使用fixed这个值。

注意：1、表格必须设置宽度 2、如果只设置表格宽度，而不设置列宽度的话，列的宽度会平均分配。

代码演示

如下代码所示，表格中安排了姓名、年龄、性别以及地址四列，这几个列的长度分别为10%、20%、30%、40%。

1.   
2.   
3.   
4.       
5.       
6.       
7.         table{   
8.             width: 100%;   
9.             table-layout: fixed;   
10.         }   
11.         .name{   
12.             width: 10%;   
13.         }   
14.         .age{   
15.             width: 20%;   
16.         }   
17.         .sex{   
18.             width: 30%;   
19.         }   
20.         .addr{   
21.             width: 40%;   
22.         }   
23.            
24.       
25.   
26.   
27.       
28.           
29.               
30.                 姓名  
31.                 年龄  
32.                 性别  
33.                 地址  
34.               
35.           
36.           
37.               
38.                 李四  
39.                 13  
40.                 男  
41.                 山东  
42.               
43.               
44.                 李四  
45.                 13  
46.                 男  
47.                 山东  
48.               
49.               
50.                 李四  
51.                 13  
52.                 男  
53.                 山东  
54.               
55.           
56.       
57.   
58.   

显示效果如下所示：

很容易可以看出，姓名、年龄、性别以及地址等列的长度分别是10%、20%、30%、40%。

如果将第一个的姓名内容增多，效果简直不忍直视（＞﹏＜）！

不忍直视（＞﹏＜）！！

 如何把单行内容超出部分显示为省略号呢？只需要将单元格设置如下属性：

1. white-space: nowrap;   
2. overflow: hidden;   
3. text-overflow: ellipsis;  

1.   
2.   
3.   
4.       
5.       
6.       
7.         table{   
8.             width: 100%;   
9.             table-layout: fixed;   
10.         }   
11.         .name{   
12.             width: 10%;   
13.         }   
14.         .age{   
15.             width: 20%;   
16.         }   
17.         .sex{   
18.             width: 30%;   
19.         }   
20.         .addr{   
21.             width: 40%;   
22.         }   
23.         td{   
24.             white-space: nowrap;   
25.             overflow: hidden;   
26.             text-overflow: ellipsis;   
27.         }   
28.       
29.   
30.   
31.       
32.           
33.               
34.                 姓名  
35.                 年龄  
36.                 性别  
37.                 地址  
38.               
39.           
40.           
41.               
42.                 李四sssssssssssssssssssssssssssssssssss  
43.                 13  
44.                 男  
45.                 山东  
46.               
47.               
48.                 李四  
49.                 13  
50.                 男  
51.                 山东  
52.               
53.               
54.                 李四  
55.                 13  
56.                 男  
57.                 山东  
58.               
59.           
60.       
61.   
62.   

修改后，效果如下：

以上这篇表格单元格内容超出时显示省略号效果(实现代码)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。