文本超出省略目标效果

我是一个超级长超级长超级长超级长超级长的标题

我是一个超级长超级长超级长超级...

当文本超过宽度是进行省略并追加省略号

单行省略样式

单行省略一般用于标题

h1{
    /*超出隐藏*/
    overflow: hidden;
    /*文本超出显示为省略号*/
    text-overflow:ellipsis;
    /*文本不换行*/
    white-space: nowrap; 
}

多行超出省略号

多行超出，可以动态设计几行进行超出省略。

一般用于列表也显示描述的时候。

p{
    /*超出隐藏*/
    overflow: hidden;
    /*文本超出显示为省略号*/
    text-overflow: ellipsis; 
    /*自适应盒子模型*/
    display: -webkit-box;
    /*行数2*/
    -webkit-line-clamp: 2;
    /*顶部向底部垂直布置子元素*/
    -webkit-box-orient: vertical;
    /*为了保证准确建议增加以下配置*/
    /*行高*/
    line-height: 25px;
    /*总高*/
    height: 50px;
}

-webkit-box-orient: vertical

-webkit-box-orient: vertical属性在某些时候可能不生效

比如：VUE打包后-webkit-box-orient: vertical; 样式消失，原因是Vue打包的时候，过滤了部分css。

p{
    /*超出隐藏*/
    overflow: hidden;
    /*文本超出显示为省略号*/
    text-overflow: ellipsis; 
    /*自适应盒子模型*/
    display: -webkit-box;
    /*行数2*/
    -webkit-line-clamp: 2;
    /*顶部向底部垂直布置子元素*/
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    /*为了保证准确建议增加以下配置*/
    line-height: 25px;
    height: 50px;
}