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

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

创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于网站制作、成都网站制作、河南网络推广、重庆小程序开发公司、河南网络营销、河南企业策划、河南品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联公司为所有大学生创业者提供河南建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com

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:

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

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如何设置超出几行显示省略号”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

当前标题：css如何设置超出几行显示省略号
文章出自：https://www.cdcxhl.com/article8/gssoip.html

成都网站建设公司_创新互联，为您提供自适应网站、建站公司、网站设计公司、微信小程序、网站制作、网站设计

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联