怎么让文字总是显示最后的，前面的隐藏
发布于 6 年前 作者 yanma 18468 次浏览 来自 问答
  • 需求的场景描述（希望解决的问题）

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

  • 希望提供的能力
5 回复 
<div class="test-box">
  <div class="test">{{testStr}}</div>
</div>
<button [@click](/user/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

试试看

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

<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对应就行了

### 问题解决

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

求大神帮忙呀！

回到顶部