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>
显示结果：
1376
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
