收藏
回答

怎么让文字总是显示最后的,前面的隐藏

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 需求 text 工具 6.7.2 2.25

- 需求的场景描述(希望解决的问题)

我有一个只显示一行的text组件,然后里面的文字会通过点击事件不停的增加,当文字内容超出这一行后,后面的会被隐藏,然后点击增加文字没有可见的反应,因为后面的文字被不断隐藏,前面的保持不变。现在我希望,当文字内容超出一行后,文字整体会忘左移动,显示最后面的,超出的前面部分被隐藏,求解

- 希望提供的能力


最后一次编辑于  2018-12-10
回答关注问题邀请回答
收藏

5 个回答

  • 忠于你°
    忠于你°
    2018-12-11
    <view style='position:relative;'>
            <scroll-view scroll-x="true" class="nav" scroll-into-view="{{moveFlag}}">
                <view class="nav_1 " bindtap='batch' data-type="backTel" hover-class='click-hov'>通讯录</view>
                <block wx:for="{{titles}}" wx:key="item">
                    <view class="n_ico iconfont icon-you "></view>
                    <view class="nav_1" bindtap='lookDpt' data-type="tit" data-index="{{index}}" hover-class='click-hov'>{{item}}</view>
                </block>
                <view class="nav_1 bumen" id="myDpt"> </view>
            </scroll-view>
        </view>
    nav {
    width:750rpx;
    height:115rpx;
    line-height:115rpx;
    box-sizing:border-box;
    padding:0 23rpx;
    background-color:#fff;
    white-space:nowrap;



    添加的时候更改scroll-into-view的值了,给最后一个元素的id对应就行了

    2018-12-11
    赞同
    回复
  • philly
    philly
    2018-12-10
    <div class="test-box">
    <div class="test">{{testStr}}</div>
    </div>
    <button @click="addTest">添加文字</button>

    JS

    testNum: 0,

    testStr: '还记得防火防盗发的话'


    addTest() {
    let arr = ['', '', '', '']
    this.testStr = this.testStr + arr[this.testNum]
    this.testNum++
     if (+this.testNum > 3) {
    this.testNum = 0
     }
    },

    CSS

    .test-box
     height: 20px
     position: relative
     .test
       line-height: 20px
       position: absolute
       right: 0
       top: 0
       white-space: nowrap

    试试看

    2018-12-10
    赞同
    回复 2
    • 箫
      2018-12-10

      还能让tsetStr滑动不?就是当有文字溢出后,可以滑到前面去,然后继续添加文字时,依然显示最后面,这样可以怎么实现呢

      2018-12-10
      回复
    • philly
      philly
      2018-12-10回复

      这个就不能这样写了,小程序的话你这个外面的盒子就应该是scroll-view了,然后增加文字后你要动态计算包裹文字的盒子宽度,再移动scroll-view的scroll-left,这样的话就能滑动也能实现你想要的尾部对齐的需求

      2018-12-10
      回复
  • 冉娃娃
    冉娃娃
    2018-12-10

    ### 问题解决

    wxss

    ```

    .test {
     position: absolute;
     right: 0;
     white-space: nowrap;
    }

    ```

    wxml

    ```

    <text bindtap="add" class="test">
     {{test}}
    </text>

    ```

    js

    ```

    add() {
     this.test += ['+1', '+22', '+333'][Math.ceil(Math.random() * 2)];
    },

    ```

    ### 解决思路

    - 设置`text`居右对齐 -> 增加文字时多的文字就会向前靠

    - 设置`text`绝对定位 -> 元素变宽后,会向左边延伸

    ### 建议

    - 这只是一个业务问题

    - 自己理一下思路,找到问题点,搜索一下即可.

    - 怀疑你自己去google过没有

    - 下面是我用你的问题google.第一条结果就可以解决你的问题.



    先看看这篇提问之前应该做的事情吧


    没有做到这四点,请不要提问

    https://developers.weixin.qq.com/community/develop/doc/0002060d8f84302c56c71efca51c04


    2018-12-10
    赞同
    回复 2
    • 冉娃娃
      冉娃娃
      2018-12-10

      ---------------- 照例分割线  --------------------

      为什么社区不支持md?????

      2018-12-10
      回复
    • 箫
      2018-12-10

      您要是觉得我没百度什么的,您可以选择不回答,还是说每个问问题的您都要去嘲讽一般,以此显示您的优越?

      2018-12-10
      回复
  • 仙森ღ₅₂₀¹³¹⁴
    仙森ღ₅₂₀¹³¹⁴
    2018-12-10

    使用scroll-view里面包裹text试试? 顶部文案点击后会左右滑动。有空可以写个代码片段。


    2018-12-10
    赞同
    回复 1
    • 箫
      2018-12-10

      每次点击,我都设置滚动值为文字长度*100,然后还是达不到效果呀

      2018-12-10
      回复
  • 箫
    2018-12-10

    求大神帮忙呀!

    2018-12-10
    赞同
    回复 1
    • You draw and I guess.
      You draw and I guess.
      2018-12-11

      WXS

      利用这个写一个页面js逻辑,就是你把要显示的从 ‘我想显示最后5个字符’;

      let a = '我想显示最后5个字符'

      <wxs module='m1'></wxs> 具体用法参照文档

      <text>{{m1.showRightText(a)}}</text>

      wxs:

          showRightText(a) {         return a.slice(-5); }

      这样只会显示最后5个数据,



      2018-12-11
      回复