Angular Material mat-form-field 多行占位符文字

Question

我将使用一个带有textarea的常规mat-form-field。我的问题是这个Textarea的占位符文本相当长。在移动设备上，空间更为有限，Angular Material会用省略号截断这个占位符文本。

我希望占位符文本能够根据空间限制自适应地移到下一行。例如，不是这样：

This is a really long text and it cannot fit on a single li...

我想要：

This is a really long text and it cannot fit on a single
line

我已经尝试了各种方法来改变mat-input-placeholder和mat-input-placeholder-wrapper的CSS，但都没有成功。我知道解决方案的一部分涉及更改text-overflow属性（如下），但我无法获得其他部分。

::ng-deep .mat-input-placeholder {
  text-overflow: clip;
}

有人能帮忙吗？

谢谢！

- Alex Verzea

Answer 1

::ng-deep 已经被弃用。

相反，您应该使用 ViewEncapsulation 并控制组件内的 CSS。

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css'],
  encapsulation: ViewEncapsulation.None,
})

对于占位符（从元素中删除 placeholder）：

<mat-placeholder style="white-space: normal;">{{question.label}}</mat-placeholder>

然后在 example.component.css 中添加您的 CSS 样式，无需使用 ::ng-deep。

.mat-form-field-label {
  white-space: normal;
}

textarea.mat-input-element {
  padding: 0px 0;
  margin: 5px 0;
}

.mat-input-placeholder {
  white-space: normal;
}

- Rijvi Rajib

---

虽然 ng-deep 已被弃用，但没有指定的删除时间：https://angular.io/guide/deprecations#index - user12861

此外，建议使用ViewEncapsulation.None技术比ng-deep更容易出现问题，因为您现在会在整个站点中泄漏样式。 - user12861

Answer 2

文字换行：

<textarea></textarea>

<textarea
  matInput
  #fileName="ngModel"
  name="fileName"
  [(ngModel)]="action!.params.file!.originalName"
  type="text"
  autocomplete="off"
  autocapitalize="off"
  readonly
  required
  [matTooltip]="action!.params.file!.originalName"
></textarea>

溢出剪切文本：

<input/>

<input
  matInput
  #fileName="ngModel"
  name="fileName"
  [(ngModel)]="action!.params.file!.originalName"
  type="text"
  autocomplete="off"
  autocapitalize="off"
  readonly
  required
  [matTooltip]="action!.params.file!.originalName"
/>

- Lorka