报表模块格內容超过时显示信息省略号实际效果

日期:2021-01-20 类型:科技新闻 

关键词:如何制作微信小游戏,微信游戏小程序,公众号游戏,h5小游戏模板,小程序游戏源码

表明

在前端开发开发设计中,常常会遇到必须限定模块格宽度而且內容超过一部分显示信息省略号的的状况。下面就简易的详细介绍下怎样做到这类实际效果。

提前准备专业知识

1. 操纵文字不换行

white-space: nowrap;

2. 超过长度时,出現省略号

overflow:hidden;

text-overflow:ellipsis

3. 改动报表合理布局优化算法

table-layout:fixed;table-layout的默认设置值为automatic,意思是列宽度由模块格內容设置。而fixed意思是列宽由报表宽度和列宽度设置。

也便是说当你给报表设置列宽时,具体状况是不起功效的,当模块格內容过量时,仍然会把宽度撑开。假如必须让报表的列宽显示信息方法由自身给模块格界定的列宽决策,就务必应用fixed这个值。

留意:1、报表务必设定宽度 2、假如只设定报表宽度,而不设定列宽度的话,列的宽度会均值分派。

编码演试

以下编码所示,报表中分配了名字、年纪、性別和详细地址4列,这几个列的长度各自为10%、20%、30%、40%。

XML/HTML Code拷贝內容到剪贴板
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻" />  
  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>李4</td>  
  39.                 <td>13</td>  
  40.                 <td></td>  
  41.                 <td>山东</td>  
  42.             </tr>  
  43.             <tr>  
  44.                 <td>李4</td>  
  45.                 <td>13</td>  
  46.                 <td></td>  
  47.                 <td>山东</td>  
  48.             </tr>  
  49.             <tr>  
  50.                 <td>李4</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%。

假如将第1个的名字內容增多,实际效果真是不忍心直视(>﹏<)!

不忍心直视(>﹏<)!!

 怎样把单行內容超过一部分显示信息为省略号呢?只必须将模块格设定以下特性:

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⑻" />  
  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">李4sssssssssssssssssssssssssssssssssss</td>  
  43.                 <td>13</td>  
  44.                 <td></td>  
  45.                 <td>山东</td>  
  46.             </tr>  
  47.             <tr>  
  48.                 <td>李4</td>  
  49.                 <td>13</td>  
  50.                 <td></td>  
  51.                 <td>山东</td>  
  52.             </tr>  
  53.             <tr>  
  54.                 <td>李4</td>  
  55.                 <td>13</td>  
  56.                 <td></td>  
  57.                 <td>山东</td>  
  58.             </tr>  
  59.         </tbody>  
  60.     </table>  
  61. </body>  
  62. </html>  

改动后,实际效果以下:

以上这篇报表模块格內容超过时显示信息省略号实际效果(完成编码)便是网编共享给大伙儿的所有內容了,期待能给大伙儿1个参照,也期待大伙儿多多适用脚本制作之家。

上一篇:制做手机上上访问的网页页面心得 返回下一篇:没有了