HarmonyOS鸿蒙Next中文本超出后，无法实现在行首出现省略号

【解决方案】

开发者您好，参考官网的ellipsisMode说明：EllipsisMode.START和EllipsisMode.CENTER仅在单行超长文本生效。

如果您这边想要实现当文本超出2行后，在行首出现省略号，也可以手动判断文本是否超长，在文本开头加上省略号，具体代码您可参考：

import { text } from '@kit.ArkGraphics2D';

let fontCollection: text.FontCollection = new text.FontCollection();

@Entry
@Component
struct TextOverflowPageComponent {
  @State tips: string = '1111111哈哈哈，哈哈，哈哈哈，哈哈哈，哈哈，哈哈，哈哈2222'

  private getEllipsisText(textData: string): string {
    let myParagraphStyle: text.ParagraphStyle = {}
    let paragraphBuilder: text.ParagraphBuilder = new text.ParagraphBuilder(myParagraphStyle, fontCollection);
    paragraphBuilder.addText(textData);
    let paragraph: text.Paragraph = paragraphBuilder.build();
    paragraph.layoutSync(100);
    const lines = paragraph.getLineCount();
    if (lines <= 2) {
      return this.tips;
    } else {
      // 超过 2 行，我们在前面加省略号
      return '...' + textData.substring(3);
    }
  }

  build() {
    Column() {
      // 判断超长加上省略号
      Text(this.getEllipsisText(this.tips))
        .width(100)
        .maxLines(2)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .ellipsisMode(EllipsisMode.START)
        .margin({
          bottom: 100
        })

      // 开头出现省略号
      Text(this.tips)
        .width(100)
        .maxLines(2)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .ellipsisMode(EllipsisMode.START)
        .margin({
          bottom: 100
        })

      // 结尾出现省略号
      Text(this.tips)
        .width(100)
        .maxLines(2)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .ellipsisMode(EllipsisMode.START)
        .margin({
          bottom: 100
        })

      // 开头出现省略号
      Text(this.tips)
        .width(100)
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .ellipsisMode(EllipsisMode.START)
        .margin({
          bottom: 100
        })

      // 结尾出现省略号
      Text(this.tips)
        .width(100)
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .ellipsisMode(EllipsisMode.END)
        .margin({
          bottom: 100
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor('#F0F5FF')
  }
}

在HarmonyOS Next中，ellipsisMode 设置为 EllipsisMode.START 时，省略号出现在行首是预期行为。根据你提供的代码和现象，当 maxLines=2 时行首未显示省略号，而 maxLines=1 时正常，这通常与文本布局和计算有关。

核心问题在于：当文本超过两行且需要从行首省略时，系统的文本布局引擎需要重新计算从何处开始截断并添加省略号。这个过程在多行情况下比单行更复杂，可能涉及当前版本的布局算法限制。

建议的排查与解决方向：

1. 检查API兼容性：确认使用的 EllipsisMode API在HarmonyOS Next的目标API版本中完全支持多行文本。有时早期版本对多行文本的行首省略支持可能存在未优化的情况。
2. 尝试明确设置文本方向：虽然中文默认是从左到右，但可以尝试显式设置 .direction(TextDirection.LTR)，确保布局引擎按预期方向计算省略位置。
3. 使用替代方案：如果上述方法无效，可以考虑以下临时方案：
   • 单行模拟：如果业务允许，将 maxLines 设置为1，并调整字体大小或容器宽度，使单行能容纳更多字符，但这可能改变设计。
   • 自定义文本截断：通过 @State 监听文本宽度，使用 onAreaChange 获取文本渲染区域，当文本超出时，手动计算并截断字符串，在开头添加“…”。但这种方法计算复杂，且可能影响性能。

当前，ellipsisMode 在单行文本下的行为是符合设计的。多行文本行首省略的问题，可能需要关注后续的HarmonyOS Next版本更新，看是否有相关的布局引擎优化。