css设置当字数超过限制后以省略号（...）显示_css超过一行显示为...

作者：繁依Fanyi0 | 2024-02-20 17:36:50

踩

css超过一行显示为...

css设置当字数超过限制后以省略号（...）显示

1、文字超出一行，省略超出部分，显示’…’
2、多行文本溢出显示省略号

1、文字超出一行，省略超出部分，显示’…’

用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
1
2
3

2、多行文本溢出显示省略号

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
1
2
3
4

注：

① -webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
② display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
③ -webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/120459