CSS实现单行、多行文本溢出显示省略号

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。
实现方法：

css:

    p { 
        width: 100px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }

代码:

    <p>我这里有好长好长的一段文字啊，可能需要显示一个省略号才行啊</p>

效果：

1623053017(1).jpg

但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。
接下来重点说一说多行文本溢出显示省略号，如下：

css:

    p { 
        width: 100px;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 3;
       overflow: hidden;
    }

代码:

    <p>我这里有好长好长的一段文字啊，可能需要显示一个省略号才行啊</p>

效果：

1623053266(1).jpg