在HarmonyOS NEXT开发中Text如何知道触发了TextOverflow.Ellipsis？

Question

在HarmonyOS NEXT开发中Text如何知道触发了TextOverflow.Ellipsis？

Answer 1

你可参考以下demo：

import measure from '@ohos.measure' 
@Entry 
@Component 
struct MeasurePage { 
  @State rawTitle: string = "1月16日，国务院新闻办公室举行新闻发布会，介绍2025年春运形势及工作安排。从1月28日（除夕）00：00到2月5日（正月初八）24：00，免费9天。1月16日，国务院新闻办公室举行新闻发布会，介绍2025年春运形势及工作安排" 
  // @State rawTitle: string = "1月16日，国务院新闻办公室举行新闻发布会" 
  @State title: string = this.rawTitle // 
  @State suffixStr: string = "" 
  expanded: Boolean = true 
  titleWidth: number = 350 
  needProcess: boolean = true 
  ellipsis: string = "..." 
  EXPAND_STR: string = "展开" 
  COLLAPSE_STR: string = "收起" 
  MAX_LINES: number =2; 
  fontSize:number = 16 
 
  aboutToAppear(): void { 
    this.process(); 
  } 
  process(): void { 
    if (this.expanded) { 
      this.collapseText(); 
    } else { 
      this.expandText(); 
    } 
  } 
  expandText(): void { 
    console.log('testTag: ' + this.needProcess); 
    if (this.needProcess) { 
      this.suffixStr = this.COLLAPSE_STR; //收起 
      this.expanded = true; 
      this.title = this.rawTitle; 
    } 
  } 
  collapseText(): void { 
    if (!this.needProcess) { 
      return; 
    } 
    let titleSize : SizeOptions = measure.measureTextSize({ 
      textContent: this.rawTitle, 
      constraintWidth: this.titleWidth, 
      fontSize: this.fontSize 
    }) 
    let twoLineSize : SizeOptions = measure.measureTextSize({ 
      textContent: this.rawTitle, 
      constraintWidth: this.titleWidth, 
      fontSize: this.fontSize, 
      maxLines: this.MAX_LINES 
    }) 
    //文本未超过限制行数，不进行展开、收起处理 
    if ((titleSize.height as number) == (twoLineSize.height as number)) { 
      this.needProcess = false; 
      return; 
    } 
    console.log('test row height:' + titleSize.height) 
    console.log('test twoLineSize height:' + twoLineSize.height) 
    let clipTitle: string = this.rawTitle 
    this.suffixStr = this.EXPAND_STR; 
    while ((titleSize.height as number) > (twoLineSize.height as number)) { 
      this.expanded = true; 
      // 可以修改其他计算算法提高性能 
      clipTitle = clipTitle.substring(0, clipTitle.length - 1); 
      titleSize = measure.measureTextSize({ 
        // textContent: clipTitle + this.ellipsis + this.suffixStr, 
        textContent: clipTitle + this.ellipsis , 
        constraintWidth: this.titleWidth, 
        fontSize: this.fontSize 
      }) 
      console.log("test while clipTitle:" + clipTitle) 
      console.log("test while clipTitle height:" + titleSize.height) 
    } 
    console.log("test clipTitle:" + clipTitle) 
    this.title = clipTitle + this.ellipsis 
    this.expanded = false; 
  } 
  build() { 
    Row() { 
      Column() { 
        Text(){ 
          Span(this.title) 
        } 
        .fontSize(this.fontSize) 
        .id("title") 
        .width(this.titleWidth) 
        if (this.needProcess) { 
          Text(this.suffixStr) 
            .fontColor(Color.Orange) 
            .onClick((event) => { 
            this.process(); 
          }) 
        } 
      } 
      .width('100%') 
      .alignItems(HorizontalAlign.Start) 
    } 
    .height('100%') 
 
  } 
}