Angular js文本剪裁，如果文本超过150个字符，则文本将被剪裁

Question

正如您在下面的图像中看到的那样，当问题超过150个字符时，该问题将被裁剪，对此的最佳解决方案是什么？有什么建议吗？谢谢。我不希望文本或问题超过150个字符时被删节。

它应该是动态的并且应该调整。

角度

<div fxLayout="row" fxLayoutGap="24px">
        <div fxFlex fxLayout="row">
          <mat-form-field appearance="outline" class="pr-4" fxFlex>
            <mat-label>Search Question</mat-label>
            <mat-chip-list #chipList>
              <mat-chip *ngIf="hasSelectedQuestion()" [selectable]="selectable" removable="true"
                (removed)="deselectQuestion()">
                {{form.controls.question.value.question}}
                <mat-icon matChipRemove>cancel</mat-icon>
              </mat-chip>
            </mat-chip-list>
            <input matInput #questionSearch [ngClass]="!hasSelectedQuestion() ? '' : 'hidden'" [matAutocomplete]="auto"
              [matChipInputFor]="chipList" formControlName="question" required class="full-width" trim />
            <mat-icon matSuffix>search</mat-icon>
            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
              <mat-option *ngFor="let question of questions$ | async" [value]="question">
                {{question.question}} <span class="disabled-text">({{question.choice ? 'Yes/No' : 'Comment only'}})
                </span>
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>
        </div>
      </div>

Answer 1

<mat-chip-list>
      <!-- Height auto allows the content to grow as per content -->
      <mat-chip style="width: 400px; height: auto; overflow: hidden;">

        <!-- max-height will limit grow of element after which overflow-y auto will allow scrolling -->
        <div
          style="
            margin-right: 10px;
            overflow-y: auto;
            height: auto;
            max-height: 60px;
          "
        >
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium
          rem a error obcaecati iste laborum doloribus numquam commodi
          exercitationem hic saepe non laudantium suscipit ullam, esse sequi qui
          aliquid aliquam.
        </div>
        <mat-icon style="position: absolute; right: 0;">cancel</mat-icon>
      </mat-chip>
    </mat-chip-list>