CSS3中text-overflow支持以...代替超出文本

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>

 显示结果：

 

 

posted @ 2013-10-24 15:03  三句对白  阅读(6280)  评论(2)  编辑  收藏  举报