HarmonyOS 鸿蒙Next Text组件设置width height后文字内容超出必须设置maxLines

HarmonyOS 鸿蒙Next Text组件设置width height后文字内容超出必须设置maxLines 【设备信息】Mate 60
【API版本】Api14
【DevEco Studio版本】5.0.7.200
【问题描述】Text组件设置width height 后 文字内容超出 必须设置maxLines ，如何不设置maxLine 实现不定行数的截断

4 回复

可以参考下：

import { MeasureText } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State textHeight: number = 30;
  @State lineHeight: number = 0

  aboutToAppear(): void {
    let textSize: SizeOptions = MeasureText.measureTextSize({
      textContent: "Hello World",
      fontSize: 20
    })
    this.lineHeight = px2vp(Number(textSize.height))
    console.log(this.lineHeight + '')
  }

  build() {
    Column() {
      Text('1111111111111111111111111111113223123123123123123126546874687468767')
        .backgroundColor(Color.Grey)
        .width(200)
        .fontSize(20)
        .height(this.textHeight)
        .maxLines(Math.floor(this.textHeight / this.lineHeight))
        .textOverflow({ overflow: TextOverflow.Ellipsis })
      Button('点击').onClick((event: ClickEvent) => {
        this.textHeight++
      })
    }

  }
}

当overflow设置为TextOverflow.None、TextOverflow.Clip、TextOverflow.Ellipsis时，需配合maxLines使用，单独设置不生效。文档如下： https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-basic-components-text-V13#textoverflow。

但可以通过动态设置maxLines属性不用将其值写死再结合textOverflow属性为 overflow: TextOverflow.Ellipsis来实现

更多关于HarmonyOS 鸿蒙Next Text组件设置width height后文字内容超出必须设置maxLines的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


width height都固定了 内容超出肯定会有问题的。。 我觉得是不是可以不设置height 然后实现内容的自动扩充

可以设置约束试一下

在HarmonyOS中，Text组件的width和height属性用于定义组件的尺寸。当设置了width和height后，如果文本内容超出组件的尺寸范围，文本会被截断或显示不全。为了避免这种情况，必须设置maxLines属性来限制文本显示的行数。maxLines属性可以确保文本在指定的行数内显示，超出部分会被省略号代替。例如，设置maxLines="2"时，文本最多显示两行，超出部分会被截断。

回到顶部