場(chǎng)景描述：

當(dāng)文本的內(nèi)容超過指定的最大行數(shù)時(shí)顯示 ”... 更多“ 的文本效果，并且可添加單獨(dú)點(diǎn)擊”... 更多“事件

需要用到的 ArkTS API ：

MeasureText、 Text、 Span

實(shí)現(xiàn)效果

實(shí)現(xiàn)效果

截取需要展示的文本

import { display, MeasureText } from "@kit.ArkUI"
// 定義參數(shù)接口
export  interface LKClipTextParam {
  // 要截?cái)嗟脑嘉谋?  rawText:string;
  // 文本顯示的字體大小
  fontSize:number;
  // 需展示的最大文本行數(shù)
  maxLines:number;
  // 文本寬度
  textWidth:number;
  // 尾部預(yù)留位置的 占位文本 （例： "…  更多"）
  tailText:string;
}

export  function lk_clipText(value:LKClipTextParam) {

  let textArr:string[] = value.rawText.split("")
  let truncateCountent:string = value.tailText.length ? value.tailText : "鴻蒙開發(fā)好"

  // 計(jì)算尾部文本size
  let measureTruncateWidth:number = MeasureText.measureText({
    textContent:truncateCountent,
    fontSize:value.fontSize,
  })

  let clipText:string = ""
  // 需要截取到的文本總寬度 = 單行文本寬度 * 文本最大行數(shù) - 尾部預(yù)留出的文本寬度
  let needClipText_width:number = (vp2px(value.textWidth) *value.maxLines - measureTruncateWidth)
  for (let i = 0; i < textArr.length; i++) {

    // 已經(jīng)截取到的文本寬度
    let clipText_width: number = MeasureText.measureText({
      textContent: clipText,
      fontSize: value.fontSize,
    })

    if (clipText_width >= needClipText_width) { // 判斷是否已經(jīng)截取夠了
      break;
    }

    clipText += textArr[i]
  }

  return clipText
}

實(shí)現(xiàn)方法

// 判斷文本是否需要折疊
isNeedDisplayIntroMore():boolean {

    let screen_width = Number(px2vp(display.getDefaultDisplaySync().width).toPrecision(5));
    // 3行文本的總寬度
    let textTotalWidth = vp2px((screen_width - 32)) * this.introMaxLines

    // 計(jì)算簡(jiǎn)介文本size
    let introTextWidth:number = MeasureText.measureText({
      textContent:this.introText,
      fontSize:14,
    })

    if (introTextWidth > textTotalWidth) {
      return true
    } else {
      return false
    }

  }

// 獲取需要顯示的文本
  displayIntro():string {
    let screen_width = Number(px2vp(display.getDefaultDisplaySync().width).toPrecision(5));
    let screen_height = Number(px2vp(display.getDefaultDisplaySync().height).toPrecision(5));
    return lk_clipText({
      rawText: this.introText,
      fontSize: 14,
      maxLines: this.introMaxLines,
      textWidth: (screen_width - 32),
      tailText: "學(xué)習(xí)鴻蒙開發(fā)"
    })

  }

UI

        Text() {

          if (this.viewModel.isNeedDisplayIntroMore()) {

            Span(this.viewModel.displayIntro())
            Span("…  更多")
              .onClick((event: ClickEvent) => {
                if (this.onMoreIntroClick) {
                  this.onMoreIntroClick()
                }
              })

          } else {
            Span(this.viewModel.intro)
          }

        }
        .fontSize(14)
        .fontColor(Color.White)
        .textAlign(TextAlign.Start)
        .maxLines(3)
        .lineHeight(26)
        .textOverflow({overflow:TextOverflow.Clip})