# 如何限制RichEditor组件placeholder属性的显示行数

#### 问题现象

在使用RichEditor组件时，当无输入时的提示文本过长时，会多行显示，如何将提示文本限制为一行，并且超出部分省略？

#### 效果预览

#### 背景知识

RichEditor是支持图文混排和文本交互式编辑的组件，其属性placeholder能够设置无输入时的提示文本，并且能够设定提示文本的字体样式和字体颜色。

#### 解决方案

RichEditor组件的placeholder属性只支持设置文本的字体样式，没有设置显示行数的方法，因此建议可以使用Stack组件和Text组件模仿出placeholder效果，具体实现如下：

使用Stack容器装载RichEditor和Text，利用Text组件的属性maxLines和textOverflow实现最多只有一行的提示文本效果，并且将Text组件的hitTestBehavior属性设置为Transparent，不阻碍被其遮挡的RichEditor的点击事件。

完整示例参考如下：

```
@Entry
@Component
struct LimitRichEditorPlaceholder {
  tips: string = '这里是示例文本，超出的部分截断。Here is the sample text, with ellipses displayed for any excess.';
  controller: RichEditorController = new RichEditorController();
  options: RichEditorOptions = { controller: this.controller };
  @State flag: boolean = false;

  build() {
    Column() {
      Stack() {
        RichEditor(this.options)
          .onEditingChange((isEditing: boolean) => {
            this.flag = isEditing;
          })
          .width(300)
          .height(300);

        Text(`${!this.flag && (this.controller.getSpans()).length < 1 ? this.tips : ''}`)
          .width(250) // 设置文本框宽度
          .maxLines(1) // 限制显示为一行
          .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出部分不显示
          .border({ width: 5 })
          .hitTestBehavior(HitTestMode.Transparent)
          .fontColor(Color.Gray)
          .border({
            width: 0
          })
          .position({
            top: 0,
            left: 0
          });
      };
    }.height('100%').width('100%')
    .justifyContent(FlexAlign.Center);
  }
}
```