SEARCH

夸米动态

css让文字在一行及多行显示,文本超出溢出显示省略号替代

2022-03-25 09:23:52 内容声明:以下内容仅供参考,我司未对内容做真实性核验,请用户注意分辨!如有任何违法/侵权信息,请立即联系我们删除

1. 例如 p元素,里面的文字不换行,超出部分用省略号代替

p{
width:100%;
word-break:keep-all;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

2. 多行文本显示省略号,省略号在断尾

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

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


注:   

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


常见结合属性:   

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

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

丨夸米科技

咨询直线:186-2370-8562  官方网站:www.quamae.com

 

*请认真填写需求信息,我们会在24小时内与您取得联系。

LOGO

地址

开封市示范区金泰云都会2号楼23层

开封市示范区集英街东吕庄5栋

联系

18623708562
[email protected]
重庆夸米网络科技有限公司 版权所有 盗版必究 备案号:渝ICP备16002041号-2 内容声明:网站内容中非对我司进行介绍(包括但不限于案例、资讯)的描述内容仅供参考,如用户发现有任何违法/侵权信息,请立即联系我们删除