css text-overflow

text-overflow

规定当文字溢出包含的元素的时候发生的事情。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文字溢出</title>
        <style type="text/css">
        div{
            width: 100px;
            height: 20px;
            line-height: 20px;
            border: 1px solid #333;
            white-space:nowrap; //段落中文字不换行
            overflow: hidden;   
            text-overflow: ellipsis;
        }
        </style>
    </head>
        
    <body>
             <div>测试文字溢出的效果。</div>
    </body>
</html>

语法    text-overflow: clip|ellipsis|string;
clip       修剪文本
ellipsis   使用省略号来代表修剪的文本
string     使用给定的字符串来代表被修剪的文本

效果图