使用text-overflow属性设置（单行或者多行）文本溢出时的省略号效果

text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。

语法：

text-overflow: clip | ellipsis;

clip（默认值）：剪切溢出文本
ellipsis：用省略号表示溢出文本

显示一行文本溢出时省略号效果：

text-overflow 只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须设置文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。

HTML 代码：

    <body>
        <p class="clip">这是一个很长的段落，使用clip表示溢出的文本</p>
        <p class="ellipsis">这是一个很长的段落，使用ellipsis表示溢出的文本</p>
    </body>

CSS 代码：

        <style type="text/css">
            p{
                margin: 20px auto;
                width: 200px;
                height: 50px;
                line-height: 50px;
            }
            .clip{
                border: 1px solid  orange;
                overflow: hidden;
                text-overflow: clip;
                white-space: nowrap;
            }
            .ellipsis{
                border: 1px solid  red;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        </style>

效果图：

显示多行文本溢出时省略号效果

修改-webkit-line-clamp的值即可表示显示行数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>多行文本溢出时的省略号效果</title>
        <style type="text/css">
            p{
                margin: 20px auto;
                width: 200px;
            }
            .two-row{
                overflow: hidden;
                text-align: justify;
                text-overflow: ellipsis;
                word-wrap: normal;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                border: 1px solid  red;
            }
            .three-row{
                overflow: hidden;
                text-overflow: ellipsis;
                word-wrap: normal;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                border: 1px solid  orange;
            }
            
        </style>
    </head>
    <body>
        <p class="two-row">这是一个很长很长的段落，使用overflow隐藏溢出的文本，使用ellipsis表示溢出文本的省略号效果</p>
        <p class="three-row">这是一个很长很长的段落，使用overflow隐藏溢出的文本，使用ellipsis表示溢出文本的省略号效果</p>
    </body>
</html>

效果图：

多行文本溢出显示.jpg