文字溢出省略

单行省略

<h1>我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容</h1>

h1{
    margin-top: 15px;
    border: 1px solid #0000FF;
    width: 200px;
    /* 单行省略 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

多行省略

<p>
文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
</p>

p{
    width: 200px;
    border: 1px solid #f00;
    /* 多行省略 */
    /* 如有显示部分调整行高或高度使其隐藏 */
    overflow: hidden;
    text-overflow: ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    /* 想要显示几行 */
    -webkit-line-clamp:2; 
}

标签：文字,省略,省略号,......,内容,webkit,overflow,文本,溢出
来源： https://www.cnblogs.com/swayfish/p/16193291.html