小程序和H5怎么让文本只显示两行！超出后以...省略号显示！

最新推荐文章于 2024-01-18 17:38:44 发布

Zan^Z

最新推荐文章于 2024-01-18 17:38:44 发布

阅读量857

点赞数

分类专栏：小程序 H5 文章标签： css3 html5

本文链接：https://blog.youkuaiyun.com/Zan_Z/article/details/106058128

版权

小程序同时被 2 个专栏收录

28 篇文章

订阅专栏

5 篇文章

订阅专栏

本文介绍了如何在小程序和H5中设置文本样式，使得内容仅显示两行，超出部分以省略号表示。通过CSS3的`line-clamp`属性，可以在H5中轻松实现此效果，对于小程序，也提供了相应的样式解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序中

  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: normal !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

H5中

  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  padding-bottom: 3px;
  line-height: 120%;
  padding-top: 3px;
  height: 33px;