Javascript 如何实现instagram这样的文本区？

在instagram中，当我们在图像上写文本时，我们可以一直写到某个极限。之后，应用程序开始减少字体大小和textarea的宽度，并在每一行增加textarea的高度，以便所有文本在屏幕上可见，textarea保持在中间。如何实现这种功能

HTML

<ion-content class="modal-body">

  <ion-row>

    <ion-col>
      <!-- cancel button  -->
      <ion-button (click)="cancel()" expand="block" fill="clear" shape="round">
        Cancel
      </ion-button>
    </ion-col>
    <ion-col class="ion-align-self-center ion-text-center">
      <!-- font style badge  -->
      <ion-badge class="font-style-badge ion-padding" style="font-family: {{ fontFamily }};" size="large" color="light"
        mode="ios" (click)="changeFontStyle()">{{ fontFamily | uppercase }}</ion-badge>
    </ion-col>
    <ion-col>
      <!-- done button  -->
      <ion-button (click)="done()" expand="block" fill="clear" shape="round">
        Done
      </ion-button>
    </ion-col>

  </ion-row>

  <!-- range slider  -->
  <div class="range">
    <ng5-slider [(value)]="fontSize" [options]="options"></ng5-slider>
  </div>

  <!-- write text block  -->
  <ion-textarea #textBlock (ionBlur)="focusText()" [(ngModel)]="text" rows="1" maxRows="8"
    style="font-size: {{ fontSize }}px; font-family: {{ fontFamily }}" class="text-input"
    (resized)="onResized($event)" placeholder="Write something" autosize>
  </ion-textarea>

  <!-- color palette fab -->
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button class="color-btn" color="light" [cpPosition]="'top-left'" [cpPositionOffset]="'50%'"
      [cpPositionRelativeToArrow]="true" [(colorPicker)]="textColor" tappable>
      <ion-icon color="dark" name="color-palette"></ion-icon>
    </ion-fab-button>
  </ion-fab>

</ion-content>

取消
{{fontFamily}大写}
多恩

TS

onResized(height) {
    console.log('textblock resized height, fontsize: ', height, this.fontSize);
    if (height > this.textBlockHeight) {
      // textblock height is increased
      this.textBlockHeight = height;
      console.log('new line added');
    } else if (height < this.textBlockHeight) {
      // textblock height is decreased
      this.textBlockHeight = height;
      console.log('line removed');
    } else {
      // textblock height not changed
    }
  }

onResized（高度）{
console.log（'textblock resized height，fontsize:'，height，this.fontsize）；
如果（高度>此.textBlockHeight）{
//文本块高度增加
this.textBlockHeight=高度；
console.log（“添加了新行”）；
}else if（高度