CSS3中text-overflow支持以...代替超出文本。
1.div1：默認狀態。超出文本默認顯示在div外
2.div2：text-overflow:ellipsis; 使用text-overflow以...代理超出文本
3.div3：如果文本換行被設置為默認（white-space：normal），不會出現超出文本被替代的情況。所以如果文本是塊狀結構，不能使用text-overflow替換超出文本
4.div4：text-overflow:clip; 文本在內邊框處被剪切
5.div5：text-overflow:"###"; 自定義超出文本替換的字符串
測試代碼：
<!DUCUTYPE HTML> <html> <head> <style type="text/css"> div{ width: 100px; height: 100px; margin: 10px; border: 1px solid #000; float: left; } #div2{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:top; } #div3{ overflow:hidden; text-overflow:ellipsis; vertical-align:top; } #div4{ white-space:nowrap; overflow:hidden; text-overflow:clip; vertical-align:top; } #div5{ white-space:nowrap; overflow:hidden; text-overflow:"###"; vertical-align:top; } </style> </head> </body> <div id="div1"> test1 test2 test3 test4 test5 test6 test7 test8 test9 test10 test11 test12 test13 test14 test15 test16 </div> <div id="div2"> test1 test2 test3 test4 test5 test6 test7 test8 test9 test10 test11 test12 test13 test14 test15 test16 </div> <div id="div3"> test1 test2 test3 test4 test5 test6 test7 test8 test9 test10 test11 test12 test13 test14 test15 test16 </div> <div id="div4"> test1 test2 test3 test4 test5 test6 test7 test8 test9 test10 test11 test12 test13 test14 test15 test16 </div> <div id="div5"> test1 test2 test3 test4 test5 test6 test7 test8 test9 test10 test11 test12 test13 test14 test15 test16 </div> <body> </html>
顯示結果：