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

Question

我使用常规 mat-form-field与 textarea里面。我的问题是这个 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 的 CSS和 mat-input-placeholder-wrapper ，没有成功。我知道解决方案的一部分涉及更改 text-overflow 属性(如下)，但我无法获得其他部分。

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

任何人都可以帮忙吗？

谢谢!

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>
然后在不添加 ::ng-deep 的情况下添加 CSS 样式在 example.component.css

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

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

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