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

(编辑：jimmy 日期: 2025/11/4 浏览：2)

说明

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

准备知识

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%。

XML/HTML Code复制内容到剪贴板
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8" />  
  5.     <title>表格演示</title>  
  6.     <style type="text/css">  
  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.     </style>  
  25. </head>  
  26. <body>  
  27.     <table border="1" cellspacing="0" cellpadding="0">  
  28.         <thead>  
  29.             <tr>  
  30.                 <th class="name">姓名</th>  
  31.                 <th class="age">年龄</th>  
  32.                 <th class="sex">性别</th>  
  33.                 <th class="addr">地址</th>  
  34.             </tr>  
  35.         </thead>  
  36.         <tbody>  
  37.             <tr>  
  38.                 <td>李四</td>  
  39.                 <td>13</td>  
  40.                 <td>男</td>  
  41.                 <td>山东</td>  
  42.             </tr>  
  43.             <tr>  
  44.                 <td>李四</td>  
  45.                 <td>13</td>  
  46.                 <td>男</td>  
  47.                 <td>山东</td>  
  48.             </tr>  
  49.             <tr>  
  50.                 <td>李四</td>  
  51.                 <td>13</td>  
  52.                 <td>男</td>  
  53.                 <td>山东</td>  
  54.             </tr>  
  55.         </tbody>  
  56.     </table>  
  57. </body>  
  58. </html>  

显示效果如下所示：

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

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

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

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

不忍直视（＞﹏＜）！！

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

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

XML/HTML Code复制内容到剪贴板
  1. white-space: nowrap;/*控制单行显示*/   
  2. overflow: hidden;/*超出隐藏*/   
  3. text-overflow: ellipsis;/*隐藏的字符用省略号表示*/  

话不多说，上代码！
XML/HTML Code复制内容到剪贴板
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8" />  
  5.     <title>表格演示</title>  
  6.     <style type="text/css">  
  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.     </style>  
  29. </head>  
  30. <body>  
  31.     <table border="1" cellspacing="0" cellpadding="0">  
  32.         <thead>  
  33.             <tr>  
  34.                 <th class="name">姓名</th>  
  35.                 <th class="age">年龄</th>  
  36.                 <th class="sex">性别</th>  
  37.                 <th class="addr">地址</th>  
  38.             </tr>  
  39.         </thead>  
  40.         <tbody>  
  41.             <tr>  
  42.                 <td class="name2">李四sssssssssssssssssssssssssssssssssss</td>  
  43.                 <td>13</td>  
  44.                 <td>男</td>  
  45.                 <td>山东</td>  
  46.             </tr>  
  47.             <tr>  
  48.                 <td>李四</td>  
  49.                 <td>13</td>  
  50.                 <td>男</td>  
  51.                 <td>山东</td>  
  52.             </tr>  
  53.             <tr>  
  54.                 <td>李四</td>  
  55.                 <td>13</td>  
  56.                 <td>男</td>  
  57.                 <td>山东</td>  
  58.             </tr>  
  59.         </tbody>  
  60.     </table>  
  61. </body>  
  62. </html>  

修改后，效果如下：

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

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

上一篇：PC端和移动端自适应问题的快速解决方法
下一篇：bootstrap学习心得总结-css样式设计分享

一句话新闻

一文看懂荣耀MagicBook Pro 16
荣耀猎人回归！七大亮点看懂不只是轻薄本，更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象：要么轻薄但性能一般，要么性能强劲但笨重臃肿。然而，今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上，荣耀宣布猎人游戏本正式回归，称其继承了荣耀 HUNTER 基因，并自信地为其打出“轻薄本，更是游戏本”的口号。
众所周知，寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验，而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起，我们不禁对它产生了强烈的好奇：作为代表荣耀猎人游戏本的跨界新物种，它究竟做了哪些平衡以兼顾不同人群的各类需求呢？