关于页面单行、多行文本超出显示省略号的解决方案

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/java_cxrs/article/details/89253133

HTML页面

单行：

<p class="pl">单行内容标题单行内容标题...</p>

多行：

<p class="pro_text">多行内容多行内容多行内容
多行内容多行内容多行内容
多行内容多行内容多行容...</p>

添加CSS样式

/*单行文本的溢出显示省略号*/
    .pl{
        width: 200px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space: nowrap;  //不换行
    }

/*多行行文本的溢出显示省略号*/

.pro_text{
    width:1085px;
    height:135px;
    position: relative;
    top:125px;
    left: 50px;
    color: #444444;
    line-height:28px;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box; 
    /* autoprefixer: off */ 
    -webkit-box-orient:vertical; 
    /* autoprefixer: on */ 
    -webkit-line-clamp:5;
}

注意:

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；本人使用谷歌浏览器测试可用.