css实现单行文本和多行文本省略号

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

单行文本出现省略号的条件：

<style>
 p {
     width: 200px; /*宽度*/
     text-overflow: ellipsis; /*文字以省略号的方式隐藏*/
     white-space: nowrap;/*禁止文字内容折行*/
     overflow: hidden;/*超出部分溢出隐藏*/
 }
</style>
<p>单行文本出现省略号单行文本出现省略号单行文本出现省略号</p>

多行文本出现省略号的条件：

<style>
p {
    width:200px;
    display: -webkit-box; /* 弹性盒模型*/
    -webkit-box-orient: vertical; /* 文字垂直排列 */
    -webkit-line-clamp:2; /*文字显示的行数*/
    overflow: hidden; /*超出部分溢出隐藏*/
}
</style>
<p>多行文本出现省略号多行文本出现省略号多行文本出现省略号多行文本出现省略号</p>