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>

显示结果：

aaarticlea/png;base64,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" alt="" />