关于css实现单行、多行省略标记

最新推荐文章于 2024-05-14 18:01:48 发布

转载最新推荐文章于 2024-05-14 18:01:48 发布 · 131 阅读

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog.php?id=h1ij2a20j&title=%E5%85%B3%E4%BA%8Ecss%E5%AE%9E%E7%8E%B0%E5%8D%95%E8%A1%8C%E3%80%81%E5%A4%9A%E8%A1%8C%E7%9C%81%E7%95%A5%E6%A0%87%E8%AE%B0

文章标签：

#css

前端专栏收录该内容

493 篇文章

订阅专栏

本文介绍如何使用CSS属性实现文本的单行或多行溢出省略效果，包括overflow、text-overflow、white-space、display、-webkit-box、-webkit-box-orient和-webkit-line-clamp等关键属性的使用方法。

实现单行：

overflow: hidden; text-overflow:ellipsis; white-space: nowrap;

实现多行：

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

-webkit-line-clamp文本显示行数；
需要结合一下属性进行使用：
　　display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
　　-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。