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

地址

重庆市渝北区金开大道西段106号创新科技园区3座4楼

郑州市中原区电厂西路西三环交叉口大学科技园东区15E

联系

18623708562
[email protected]
重庆夸米网络科技有限公司 版权所有 备案号:渝ICP备16002041号-2 站点已申请专利保护 盗版必究 法律支持:河南律师服务中心
多一份参考,总有益处
联系夸米,免费获得《策划方案》及报价
高端网站建设 | 响应式网站 | 企业官网 | 营销网站 | UI设计 | 小程序开发 | APP开发 | 品牌设计 | 网络营销推广
业务热线:18623708562
QQ咨询
稍后再说