Text实现展开收起，实现文本的展开收起的功能，收起全文可以跟随在文本的末尾，而不是放置在固定的位置。

import measure from '@ohos.measure' 
 
@Entry 
@Component 
struct TextCollapseTest { 
  @State rawTitle: string = "1月16日，国务院新闻办公室举行新闻发布会，介绍2024年春运形势及工作安排。从2月9日（除夕）00：00到2月17日（正月初八）24：00，免费9天。" 
  @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; 
 
  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: 30 
    }) 
    let twoLineSize: SizeOptions = measure.measureTextSize({ 
      textContent: this.rawTitle, 
      constraintWidth: this.titleWidth, 
      fontSize: 30, 
      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, 
        constraintWidth: this.titleWidth, 
        fontSize: 30 
      }) 
      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) 
          if (this.needProcess) { 
            Span(this.suffixStr) 
              .fontColor(Color.Orange) 
              .onClick((event) => { 
                this.process(); 
              }) 
          } 
        } 
        .fontSize(30) 
        .fontWeight(FontWeight.Bold) 
        .id("title") 
        .width(this.titleWidth) 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.