[英]Angular Material mat-form-field Placeholder text on multiple lines
我使用一个普通的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
和mat-input-placeholder-wrapper
的 CSS,但没有成功。 我知道解决方案的一部分涉及更改 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>
然后在example.component.css
添加没有::ng-deep
CSS 样式
.mat-form-field-label {
white-space: normal;
}
textarea.mat-input-element {
padding: 0px 0;
margin: 5px 0;
}
.mat-input-placeholder {
white-space: normal;
}
换行文字:
<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"
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.