单行文本超出或多行文本超出显示省略号...

单行文本超出隐藏

css样式中必须同时设置：
white-space: nowrap; //不换行
text-overflow: ellipsis;
overflow: hidden;

    
单行文本超出隐藏
    

        This is a sad story. Tell me your name and address.
    

   .single{
       width: 200px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       border: 1px solid black;
   }

演示：

多行文本超出隐藏

这里以3行为例做演示：

css样式中必须同时设置：
display: -webkit-box;
-webkit-line-clamp: 3; //设置显示3行
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

    
多行文本超出隐藏
    

        This is a sad story. Tell me your name and address.
        This is a sad story. Tell me your name and address.
        This is a sad story. Tell me your name and address.
    

    .multiple{
        display: -webkit-box;
        -webkit-line-clamp: 3;              
        -webkit-box-orient: vertical;
        width: 300px;
        height: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        border: 1px solid black;
        line-height: 30px;
        padding: 0 10px;
    }

演示：