大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍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:
单行文本超出部分显示省略号我是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如何设置超出几行显示省略号”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!