云诺说 - 小程序开发 - 软件定制
当前位置: QQ小程序 > uni-app开发之QQ小程序实现文本溢出显示省略号(四)

uni-app开发之QQ小程序实现文本溢出显示省略号(四)

2019-12-06 07:52 分类:QQ小程序 作者:云诺 阅读(5059)

版权声明:本文为博主原创文章,如果转载请给出原文链接:http://doofuu.com/article/4156214.html

不管是开发网站还是小程序、或者APP都会遇到文本溢出的情况。上一篇博客实现了 QQ小程序二维码,这篇博客就重点来聊聊单行文本溢出和多行文本溢出的解决办法!其实也特别的简单,关键是用到下面这个几个样式而已,来看看吧

display: -webkit-box;  /*设置为弹性盒子*/
-webkit-line-clamp: 3;  /*最多显示x行*/
overflow: hidden;  /*超出隐藏*/
 text-overflow: ellipsis;  /*超出显示为省略号*/

  • 单行文本超出显示省略号

    display: -webkit-box;  /*设置为弹性盒子*/
    overflow:hidden; //超出一行文字自动隐藏
    text-overflow:ellipsis;//文字隐藏后添加省略号
    white-space:nowrap; //强制不换行
  • 多行文本溢出显示省略号

    overflow: hidden;/*超出隐藏*/
    display: -webkit-box;  /*设置为弹性盒子*/
    -webkit-line-clamp: 3;  /*最多显示x行*/
    text-overflow: ellipsis;  /*超出显示为省略号*/
    -webkit-box-orient: vertical;

很简单吧!关于这几种样式的意思就不在本文的范畴了,不懂的自己百度吧!

下面看看我的案例吧!

<view class="content" >{{item.content}}</view>
.content {
      display: -webkit-box;  /*设置为弹性盒子*/
      -webkit-line-clamp: 2;  /*最多显示x行*/
      overflow: hidden;  /*超出隐藏*/
      text-overflow: ellipsis;  /*超出显示为省略号*/
      -webkit-box-orient: vertical;
      font-size: 25rpx;
      color: #999;
    }

效果如下

QQ截图20191206200657.jpg

演示QQ小程序

7107e6ea5dd55fb64e1a7fb168c49907.png

 

祝生活愉快!

「创作不易,你的支持是本站持续更新最大的动力!」

赞(0) 打赏

谢谢你请我喝奶茶*^_^*

支付宝
微信
1

谢谢你请我喝奶茶*^_^*

支付宝
微信

上一篇:

下一篇:

共有 0 条评论 - uni-app开发之QQ小程序实现文本溢出显示省略号(四)

博客简介

云诺说是一个致力于分享互联网编程技术交流、小程序开发、小程序源码分享、软件服务定制和生活记录的技术服务型学习博客网站。

微信 :LGY178888

职业 :小程序开发、软件定制

现居 :广东省-广州市-天河区

友情链接

欢迎与本博客交换友情链接,本博客对交换链接的网站没有要求。如果您是本博客的友情链接网站,在遇到网站运行问题时,可以随时联系,我们将免费提供技术类支持! 申请交换友链

站点统计

  • 文章总数:155 篇
  • 草稿数目:0 篇
  • 分类数目:14 个
  • 独立页面:165 个
  • 评论总数:0 条
  • 访问总量: 798105次
  • 最近更新:2024年10月14日