如何使輸入區域適合角度文字？

Question

我想要一個輸入區域以適合其中的文本。

我的代碼：

<mat-card>
  <fieldset>
    <legend>qwerty</legend>
    <div>
      <div>
        <label>Qwerty Asdf</label>
        <mat-form-field>
          <input matInput disabled="true" name="type" value="qwerty" />
        </mat-form-field>
      </div>
      <div>
        <label>Foo Bar</label>
        <mat-form-field>
          <input matInput disabled="false" name="type" value="baz" />
        </mat-form-field>
      </div>
      <div>
        <label>E Makarena</label>
        <mat-form-field>
          <input matInput disabled="false" name="type" value="asdsadsadsadsadsaadsad" />
        </mat-form-field>
      </div>
    </div>
  </fieldset>
</mat-card>

以上代碼的結果是：

我嘗試將輸入寬度設置為auto或100%或fit-content但這並沒有改變。

Answer 1

嘗試在https://material.angular.io/components/input/api中提到的指令matTextareaAutosize

那應該是您要找的東西。

不能僅使用CSS來完成此操作，因為CSS無法識別用戶的輸入。 必須通過Javascript完成。

如果您只對純CSS的“增加輸入字段的寬度”感興趣，則可以這樣做：

• 使輸入字段真的很寬
• 設置CSS樣式以在鍵入的文本下划線（請參閱https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration ）
• 應該會產生與“自動展開”相似的效果，但可能與“材質設計”不一致