怎么让文字总是显示最后的，前面的隐藏 - WXOPEN Club

需求的场景描述（希望解决的问题）

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

希望提供的能力

5 回复

duna1 楼6 年前

<div class="test-box">
  <div class="test">{{testStr}}</div>
</div>
<button @click="addTest">添加文字</button>

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

试试看

gongna2 楼6 年前

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

whe3 楼6 年前

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

gyao4 楼6 年前

### 问题解决

wxss

```

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

```

wxml

```

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

```

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

```

### 解决思路

设置`text`居右对齐 -> 增加文字时多的文字就会向前靠
设置`text`绝对定位 -> 元素变宽后,会向左边延伸

### 建议

这只是一个业务问题
自己理一下思路,找到问题点,搜索一下即可.
怀疑你自己去google过没有
下面是我用你的问题google.第一条结果就可以解决你的问题.

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

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

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

gangzhong5 楼5 年前

求大神帮忙呀！