多行上的角材料mat-form-field占位符文本 [英] Angular Material mat-form-field Placeholder text on multiple lines

问题描述

我使用内部带有textarea的常规mat-form-field.我的问题是此Textarea的占位符文本很长.在空间受限的移动设备中，此占位符文本被Angular Material省略，并用省略号将其截断.

I use a regular mat-form-field with a textarea inside. My issue is that the placeholder text for this Textarea is rather long. In mobile, where space is more limited, this placeholder text is truncated by Angular Material with an ellipsis.

我想通过向下移动到下一行来使占位符文本适应空间限制.因此，例如，代替:

I would like to have the placeholder text adjust to space restrictions by shifting down onto the next line. So, for example, instead of:

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属性(如下所示)，但是我无法获得其他部分.

I have already tried various approaches to changing the CSS of the mat-input-placeholder and mat-input-placeholder-wrapper, with no success. I know that part of the solution involves changing the text-overflow property (below), but I can't get the other parts.

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

任何人都可以帮忙吗?

谢谢！

推荐答案

::ng-deep已弃用.

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

Instead, you should use ViewEncapsulation and control the CSS inside the component.

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

对于占位符(从元素中删除placeholder):

For placeholder (remove placeholder from element):

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

然后在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;
}

这篇关于多行上的角材料mat-form-field占位符文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！