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

時間 2019-11-25

標籤 css3 css text overflow 支持代替超出文本欄目 CSS 简体版

原文原文鏈接

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:"###"; 自定義超出文本替換的字符串

測試代碼：css

<!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>