角材料表单字段长标号与输入文本重叠

Question

角质材料字段标签与输入文字重叠，还存在多个化妆品问题？带有字段的长标签存在响应性问题。检查stackblitz链接：https://stackblitz.com/edit/angular-ar2ulq

有解决办法吗？条件:完整的标签应该是可见的，它不应该收缩。

Answer 1

您可以调整label空白属性：

  <mat-form-field class="field-label-ellipsis" appearance="outline" floatLabel="always">
    <mat-label>
      Legacy form field long Long long Long long Long long Long long Long lon
      Long long Long long Long long Long label
    </mat-label>
    <input matInput placeholder="Placeholder" />
    <mat-hint>Hint</mat-hint>
  </mat-form-field>

和CSS：

.field-label-ellipsis mat-label {
  white-space: nowrap;
}

Stackblitz上的工作实例