DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> 表格單元格內容超出時顯示省略號效果(實現代碼)
表格單元格內容超出時顯示省略號效果(實現代碼)
編輯：前端技巧     

說明

在前端開發中，經常會遇到需要限制單元格寬度並且內容超出部分顯示省略號的的情況。下面就簡單的介紹下如何達到這種效果。

准備知識

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>  

修改後，效果如下：

以上這篇表格單元格內容超出時顯示省略號效果(實現代碼)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。

前端技巧
css自動截取指定長度字符串，結尾顯示... 支持FF浏覽器
<style type="text/css"> 復制代碼代碼如下:
分享8款非常有用的 CSS 開發工具
CSS3 Patterns Gallery這個CSS3模式庫展示了各種使用純 CSS3 實現的網頁背
網頁防復制功能實現方法(附破解方法)
通過右鍵查看源文件發現如下代碼:1、firefox下可以通過css來禁止選擇復制功能CSS Code

相關文章

前端技巧關於網頁技巧WEB前端代碼網頁特效代碼
小編推薦
給web設計的新手們建議一些有用的學習資料 CSS樣式重置和清除(讓不同浏覽器顯示效果一致) 網頁制作不得不知道的幾個技巧 編寫高質量代碼 Web前端開發修煉之道 書摘精要 web的各種前端打印方法之CSS控制網頁打印樣式 IE8采用多兼容模式正常顯示網頁 Html與css基礎(必看篇) 網頁頁腳該注意的地方小結 如何在網頁制作中給網頁字體文件增加矢量圖標 有創意的關於我們網頁頁面設計
熱門推薦
css中的float屬性的一些理解 用戶需求導致營銷型設計 css前端知識點總結(必看篇) 手把手教你做超酷的條形碼效果 CSS中浏覽器對尺寸和寬高解釋差異的解決方法 RGB配色表小集 一個新的CSS圖片替換的技巧(背景顯示與文本移離屏)告別9999px 如何讓一個網站前端有氣質可以吸引住用戶 HTML name、id、class 的(格式/應用場景/特性)等區別介紹
大家都在看
HTML列表標簽dl、ul、ol 的使用示例 JQuery 圖片滾動輪播示例代碼 可以測試javascript運行效果的代碼 css針對各個浏覽器的前綴是什麼 簡單總結JavaScript中的String字符串類型 Jquery對象和Dom對象的區別分析 10款最佳HTML5繪圖工具 CSS基礎教程:CSS中的定位（position）
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved