一般的文字截斷（適用於內聯與塊）：
.text-overflow {
display:block;/*內聯對象需加*/
width:25em;
word-break:keep-all;/* 不換行 */
white-space:nowrap;/* 不換行 */
overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */
text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ；需與overflow:hidden;一起使用。*/
}
對於表格文字溢出的定義：
對於表格超出范圍顯示省略號
table{
width:25em;
table-layout:fixed;/* 只有定義了表格的布局算法為fixed，下面td的定義才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不換行 */
white-space:nowrap;/* 不換行 */
overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */
text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ；需與overflow:hidden;一起使用。*/
}
如：
------------------------------------------------------------------------------------------------
如果想鼠標懸停省略號顯示內容就 在title 那里寫好即可~
代碼：
<style type="text/css"> #div1{ padding: 10px; width: 200px; height:30px; text-shadow: 3px 3px 3px #aaaaaa; border: 1px solid #999999; text-overflow: ellipsis; overflow: hidden; word-break: break-all; white-space: nowrap; } </style> <body> <div id="div1" title="AAAAAAAAAAAAABBBBBBBBBBBBBCCCCCCCCCCCCCCDDDDDDDDDDDD"> AAAAAAAAAAAAABBBBBBBBBBBBBCCCCCCCCCCCCCCDDDDDDDDDDDD </div> </body>