我使用常规 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;
}
任何人都可以帮忙吗?
谢谢!
最佳答案
::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;
}
关于Angular Material mat-form-field 多行占位符文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50261524/