收藏
回答

如何获取text文本高度

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 需求 text 客户端 6.7.3 2.2.0

展示的text如果文本过长,如果超出了设置的高度(或者超过3行),则仅显示3行。通过展开的方式显示全部内容。

我现在想知道,

我拿到文本之后,怎么计算所需的高度或者行数

效果类似于微信朋友圈文本那样,展开与收起

最后一次编辑于  2018-11-22  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

2 个回答

  • Mingจุ๊บ
    Mingจุ๊บ
    2018-11-22

    顶一下有用吗

    2018-11-22
    赞同
    回复
  • 卢霄霄
    卢霄霄
    2018-11-22

    用view可以啊,或者你加个display:block。然后用max-height属性和line-height控制一下;或者可以

    display: -webkit-box;

    overflow: hidden;

    word-break: break-all;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 3;


    2018-11-22
    赞同
    回复 6
    • Mingจุ๊บ
      Mingจุ๊บ
      2018-11-22

      超过3行的我要显示  “展开”   的按钮,没有超过的,就不显示“展开”按钮,我要的是如何判断是否有3行呢

      2018-11-22
      回复
    • 卢霄霄
      卢霄霄
      2018-11-22回复Mingจุ๊บ

      这样子,你弄两层,父标签设上max-height ,预计成3行的高度,并且overflow:hidden;然后用query去查子标签的高度,如果子标签的高度高一些,就放个展开按钮

      https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html

      2018-11-22
      回复
    • Mingจุ๊บ
      Mingจุ๊บ
      2018-11-23回复卢霄霄

      这个方法确实可行,但是针对于一个图文本列表来说,例如像微信朋友圈那样该如何确定对应的每条,因为我是用wx:for 渲染的一个图文列表。

      wx.createSelectorQuery().selectAll('.class).boundingClientRect().exec(),

      这个方法获取的是全部的文本高度,如何确定每条数据当前的高度呢。


      2018-11-23
      回复
    • 卢霄霄
      卢霄霄
      2018-11-23回复Mingจุ๊บ

      wx:for的标签上,加个class,selectAll这个class,出来的结果里没有每一项吗?

      2018-11-23
      回复
    • Mingจุ๊บ
      Mingจุ๊บ
      2018-11-23回复卢霄霄

      可以了,非常感谢

      2018-11-23
      回复
    查看更多(1)