多行上的角度材料垫形式字段占位符文本

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-placeholderand的 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>

然后添加你的 CSS 样式而不用::ng-deep在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;
}