# 如何实现多行文本行中省略的效果

#### 问题现象

Text文本多行时，可以利用textOverflow来设置省略效果，但是设置EllipsisMode.CENTER不生效。

#### 效果预览

#### 背景知识

*   根据ellipsisMode使用说明，可以看到EllipsisMode.START和EllipsisMode.CENTER仅在单行超长文本生效，所以文本多行时设置该属性不生效，需要使用其他方式实现。
*   measureTextSize可以计算超长文本的宽度，利用文本计算可以算出超长文本的首行字符，然后把剩余的文本设置成一行即可使用ellipsisMode属性。

#### 解决方案

1.  首先利用MeasureUtils.measureTextSize算得文本长度（px单位）。
    
    ```
    textSize: SizeOptions = this.uiContextMeasure.measureTextSize({
      textContent: this.textContent,
      fontSize: 16,
    });
    ```
    
2.  然后利用vp2px方法可以算得Text组件一行所占宽度（px单位）。
    
    ```
    this.textWidthPx = this.getUIContext().vp2px(this.textWidth);
    ```
    
3.  再然后根据公式文本字符数\*（Text组件一行所占宽度/文本总长度）即可算出一行所占字符数。
    
    ```
    this.oneLineLength = this.textContent.length * this.textWidthPx / (this.textSize.width as number);
    ```
    
4.  最后把文本分成两部分，第一个Text组件完整展示一行所占字符，第二个Text组件展示剩余字符，并且设置ellipsisMode效果。

完整示例参考如下：

```
import { MeasureUtils } from '@kit.ArkUI';

@Entry
@Component
struct MultipleLinesTest {
  private textContent: string = '超长的文本在这里展示出来了超长的文本在这里展示出来了超长的文本在这里展示出来了';
  uiContextMeasure: MeasureUtils = this.getUIContext().getMeasureUtils();
  textSize: SizeOptions = this.uiContextMeasure.measureTextSize({
    textContent: this.textContent,
    fontSize: 16,
  });
  // Text组件宽度
  private textWidth: number = 200;
  private textWidthPx: number = 0;
  private oneLineLength: number = 0;

  aboutToAppear(): void {
    this.textWidthPx = this.getUIContext().vp2px(this.textWidth);
    this.oneLineLength = this.textContent.length * this.textWidthPx / (this.textSize.width as number);
  }

  build() {
    Row() {
      Column() {
        // 计算出来的第一行文本
        Text(this.textContent.slice(0, this.oneLineLength))
          .width(this.textWidth)
          .fontSize(16);
        // 除去第一行文本的其他文本
        Text(this.textContent.slice(this.oneLineLength, this.textContent.length))
          .width(this.textWidth)
          .fontSize(16)
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .wordBreak(WordBreak.BREAK_ALL)
          .ellipsisMode(EllipsisMode.CENTER);
      }
      .width('100%');
    }
    .height('100%');
  }
}
```