HarmonyOS鸿蒙Next中父布局宽高固定，内部有Text，文字内容过多，超过了父布局，怎么限制Text

HarmonyOS鸿蒙Next中父布局宽高固定，内部有Text，文字内容过多，超过了父布局，怎么限制Text 父布局宽高固定，内部有Text，文字内容过多，超过了父布局，怎么限制Text

5 回复

参考以下示例：// xxx.ets

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

@Entry
@Component
struct WebComponent {
  @State newsINfo:string = '9月1日，据广东省纪委监委消息：深圳市原副市长黄敏严重违纪违法被开除党籍和公职。据了解，黄敏曾是“北极鲶鱼”'
  boxHeight:number = 80
  textSize : SizeOptions = MeasureText.measureTextSize({
    textContent: this.newsINfo,
    fontSize: '15px'
  })

  build() {
    Column() {
      Row(){
        Text(this.newsINfo)
          .backgroundColor(Color.Green)
          .textOverflow({overflow:TextOverflow.Clip})
          .width('100%')
          .height('100%')
          .fontSize(15)
          .maxLines(Math.floor(this.boxHeight/Number(this.textSize.height)))
      }
      .width(150)
      .height(this.boxHeight)
      .backgroundColor(Color.Brown)
    }
  }
}

更多关于HarmonyOS鸿蒙Next中父布局宽高固定，内部有Text，文字内容过多，超过了父布局，怎么限制Text的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


父布局宽高固定，文本过长时

如果超出文本是向下扩展可限制文本行数，并设置省略符号

.maxLines()
.textOverflow()

如果超出文本是向左右扩展，可用对Text套一个Flex组件，实现对文本的进行二次布局

这样写试试，如果父布局的宽高限定死了

```scss
Text(item.name)
  .width('100%')
  .height('100%')
  .ellipsisMode(EllipsisMode.END)
  .textOverflow({ overflow: TextOverflow.Ellipsis })

在HarmonyOS鸿蒙Next中，如果父布局的宽高固定，而内部Text的文字内容过多导致超出父布局，可以通过以下方式限制Text的显示：

  1. 设置Text的maxLines属性：通过maxLines属性限制Text显示的最大行数。例如，maxLines="2"表示Text最多显示两行，超出部分将被截断。

  2. 使用Text的ellipsis属性：通过ellipsis属性设置Text在超出显示范围时显示省略号。例如，ellipsis="end"表示在文本末尾显示省略号。

  3. 设置Text的width和height属性：通过width和height属性明确限制Text的宽高，使其不超过父布局的尺寸。

  4. 使用Scroll组件包裹Text：如果希望用户可以通过滚动查看全部内容，可以将Text放置在Scroll组件中，这样Text的内容超出父布局时，用户可以通过滚动查看。

这些方法可以有效地限制Text的显示，确保其内容不会超出父布局的范围。

在HarmonyOS鸿蒙Next中，如果父布局宽高固定，而内部Text内容超出父布局，可以通过以下方式限制Text显示：

  1. 设置Text的最大行数：通过maxLines属性限制Text显示的行数。

    Text text = new Text(context);
text.setText("长文本内容");
text.setMaxLines(2); // 限制最多显示2行

  2. 设置Text的省略方式：使用ellipsize属性控制超出部分的显示方式。

    text.setEllipsize(TextUtils.TruncateAt.END); // 超出部分显示省略号

  3. 设置Text的宽度和高度：通过layoutWidth和layoutHeight属性限制Text的尺寸。

    text.setLayoutConfig(new LayoutConfig(LayoutConfig.MATCH_PARENT, LayoutConfig.WRAP_CONTENT));

通过这些方式，可以有效限制Text的显示范围，避免内容超出父布局。

回到顶部