css如何设置超出几行显示省略号

这篇文章主要介绍css如何设置超出几行显示省略号，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

　　css设置超出几行显示省略号：

　　1、单行文本

　　使用text-overflow：ellipsis属性

　　text-overflow: clip|ellipsis|string;

　　clip：修剪文本。

　　ellipsis：显示省略符号来代表被修剪的文本。

　　string：使用给定的字符串来代表被修剪的文本。

　　示例：

　　css:

　　p{

　　overflow: hidden;/*超出部分隐藏*/

　　text-overflow:ellipsis;/* 超出部分显示省略号 */

　　white-space: nowrap;/*规定段落中的文本不进行换行 */

　　width: 250px;/*需要配合宽度来使用*/

　　border: 1px solid red;

　　font-size: 30px;

　　}

　　html:

单行文本超出部分显示省略号我是mdzz

　　2、多行文本显示省略号，省略号在段尾

　　p{

　　display: -webkit-box;

　　-webkit-box-orient: vertical;

　　-webkit-line-clamp: 3;

　　overflow: hidden;

　　width: 250px;

　　border: 1px solid red;

　　font-size: 30px;

　　}

　　因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

　　注：

　　-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。

　　常见结合属性：

　　display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

　　-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

以上是"css如何设置超出几行显示省略号"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！