# 实现Text文本无限长不换行

#### 问题现象

Text文本超长时超过屏幕宽度后会自动换行，如果设置maxLines属性虽然可以让文本不换行但是会造成显示不全的问题，如何实现Text文本既能无限长展示又能不换行？

问题代码示例参考如下：

```
@Component
@Entry
struct Problem {
  @State str: string = '';
  build() {
    Column() {
      Text(this.str)
        .margin({ left: 20 })
        .textAlign(TextAlign.End)
        .height(40)
        .fontSize(22)
        .fontColor(Color.Pink)
        .constraintSize({
          minWidth: '80%'
        })
        .maxLines(1)

      Column() {
        TextInput({ placeholder: "请输入内容" })
          .borderRadius(0)
          .onChange((value: string) => {
            this.str = value
          })
      }

    }.justifyContent(FlexAlign.Center)
    .width('100%')
    .margin({ top: 100 })
    .alignItems(HorizontalAlign.End)
  }
}
```

#### 效果预览

#### 背景知识

*   Scroll是可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。
*   Text组件默认在水平方向上从左往右展示，利用textAlign属性可以设置文本从右往左展示。
*   TextInput组件的onChange方法会在输入内容发生变化时，触发该回调，可以利用该方法搭配Scroll滑动到最新的文本位置。

#### 解决方案

可以在Text组件外嵌套一个横向滚动的Scroll组件，并且设置Text文本为从右往左展示，即可让Text组件内容完整展示，最后搭配TextInput的onChange事件，在内容变化时调用Scroll的scrollEdge方法即可实现“输入长度几乎无限长，不换行”。

*   Scroll横向展示实现。
    
    ```
    .scrollable(ScrollDirection.Horizontal)
    ```
    
*   设置文本从右往左展示实现。
    
    ```
    Text(this.str)
      .margin({ left: 20 })
      .textAlign(TextAlign.End)
      .height(40)
      .fontSize(22)
      .fontColor(Color.Black)
      .constraintSize({
        minWidth: '80%'
      })
      .maxLines(1)
      .id('textContent');
    ```
    
*   onChange方法触发Scroll滑动到尾部。
    
    ```
    TextInput({ placeholder: '请输入内容' })
      .margin({left:16,right:16})
      .borderRadius(24)
      .onChange((value: string) => {
        this.str = value;
        this.scroller.scrollEdge(Edge.End);
      });
    ```
    

完整示例参考如下：

```
@Entry
@Component
export struct TextInfiniteLength {
  @State str: string = '';
  controller: TextInputController = new TextInputController();
  scroller: Scroller = new Scroller();

  build() {
    Column() {
      Scroll(this.scroller) {
        Row() {
          Text(this.str)
            .margin({ left: 20 })
            .textAlign(TextAlign.End)
            .height(40)
            .fontSize(22)
            .fontColor(Color.Black)
            .constraintSize({
              minWidth: '80%'
            })
            .maxLines(1)
            .id('textContent');
        }
        .layoutWeight(1)
        .justifyContent(FlexAlign.SpaceBetween);
      }
      .padding({ left: 50 })
      .width('100%')
      .scrollBar(BarState.Off)
      .scrollable(ScrollDirection.Horizontal)
      .height(40)
      .width('100%');

      Column() {
        TextInput({ placeholder: '请输入内容' })
          .margin({left:16,right:16})
          .borderRadius(24)
          .onChange((value: string) => {
            this.str = value;
            this.scroller.scrollEdge(Edge.End);
          });

      };

    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .margin({ top: 100 })
    .alignItems(HorizontalAlign.End);
  }
}
```