站長資訊網方法：首先使用“word-break:keep-all”語句設置不換行；然后使用“overflow:hidden”語句設置超出隱藏部分；最后使用“text-overflow:ellipsis”語句設置溢出顯示省略號。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
td溢出隱藏
table{ width:100px; table-layout:fixed;/* 只有定義了表格的布局算法為fixed，下面td的定義才能起作用。 */ } td{ width:100%; word-break:keep-all;/* 不換行 */ white-space:nowrap;/* 不換行 */ overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */ text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ；需與overflow:hidden;一起使用*/ }
全部代碼：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>document</title> <style> table{ width:100px; table-layout:fixed;/* 只有定義了表格的布局算法為fixed，下面td的定義才能起作用。 */ } td{ width:100%; word-break:keep-all;/* 或是 white-space:nowrap;不換行 */ overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */ text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ；需與overflow:hidden;一起使用*/ } </style> </head> <body> <table border="1"> <tr> <td>19999</td> <td>19999</td> </tr> <tr> <td>19999</td> <td>19999</td> </tr> <tr> <td>19999</td> <td>19999</td> </tr> </table> </body> </html>
效果截圖：
推薦學習：css視頻教程
