CSS文本溢出显示省略号

乐心湖

发布于 2021-01-18 14:57:56

2.4K00

代码可运行

文章被收录于专栏：MyTechnologyMyTechnology

运行总次数：0

代码可运行

实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。

实现方法：

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

效果如图：

实现方法：

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

效果如图：

版权属于：乐心湖's Blog
本文链接：https://cloud.tencent.com/developer/article/1774950
声明：博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度