中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
微信扫码分享
import measure from '@ohos.measure' @Entry @Component struct MeasurePage { @State rawTitle: string = "1月16日,国务院新闻办公室举行新闻发布会,介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排介绍2024年春运形势及工作安排绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排" @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 = 3; fontSize: number = 16 aboutToAppear(): void { this.process(); } // process(): void { if (this.expanded) { this.collapseText(); } } 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.width as number) > (twoLineSize.width as number)) { this.maxl = 2 return; } console.log('test row height:' + titleSize.width) console.log('test twoLineSize height:' + twoLineSize.width) let clipTitle: string = this.rawTitle this.suffixStr = this.EXPAND_STR; while ((titleSize.width as number) > (twoLineSize.width 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.width) } console.log("test clipTitle:" + clipTitle) this.title = clipTitle + this.ellipsis this.expanded = false; } @State maxl: number = 3; build() { Row() { Column() { //样式1 Text() { Span(this.title) } .fontSize(this.fontSize) .id("title") .width(this.titleWidth) .maxLines(this.maxl) .margin({ bottom: 30 }) .backgroundColor(Color.Orange) Column() { Text('文本未超过限制行数的内容') { }.fontSize(this.fontSize).id("title").width(this.titleWidth).maxLines(this.maxl) }.backgroundColor(Color.Pink) // Button("切换").onClick(() => { // this.title = "实打实实打实实打实实打实实打" // this.aboutToAppear() // }) }.width('100%').alignItems(HorizontalAlign.Start) }.height('100%') } } 方案二: @Entry @Component struct Demo { @State rawTitle: string = "1月16日,国务院新闻办公室举行新闻发布会,介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排介绍2024年春运形势及工作安排绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排,介绍2024年春运形势及工作安排" // @State rawTitle: string = "1月16日,国务院新闻办公室举行新闻发布会" build() { RelativeContainer() { Text(this.rawTitle) .id('DemoHelloWorld') .fontWeight(FontWeight.Bold) .maxLines(3) .textOverflow({ overflow: TextOverflow.Ellipsis }) } .height('100%') .width('100%') } } ,方案三: import measure from '@ohos.measure' @Entry @Component struct MeasurePage { @State rawTitle: string = "1月16日,国务院新闻办公室举行新闻发布会,介绍2024年春运形势及工作安排。从2月9日(除夕)00:00到2月17日(正月初八)24:00,免费9天。1月16日,国务院新闻办公室举行新闻发布会,介绍2024年春运形势及工作安排" // @State rawTitle: string = "1月16日,国务院新闻办公室举行新闻发布会" @State title: string = this.rawTitle @State suffixStr: string = "" titleWidth: number = 350 @State maxLines: number = 1 fontSize: number = 16 getRowHeight():number { 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.maxLines }) if ((titleSize.height as number) > (twoLineSize.height as number)) { this.maxLines = 3 return 100 } else { this.maxLines = 1 return 80 } } build() { Row() { Column() { Text() { Span(this.title) } .fontSize(this.fontSize).id("title").width(this.titleWidth) .backgroundColor(Color.Red) .maxLines(this.maxLines) Button("获取行高") .onClick(()=>{ this.getRowHeight() }) }.width('100%').alignItems(HorizontalAlign.Start) }.height('100%') } }