如何解决Angular / Material-样式mat-hint适用于大块文本
我正在使用Material在Angular 9项目中工作。
我在这里有一个演示示例:https://stackblitz.com/edit/mat-hint-styling-issue?file=src/app/app.component.html
我正在使用带提示的输入。通常,提示会包含少量文本,但是文本可能会很大。如果发生这种情况,我想将垫提示样式设置为更敏感。
理想情况下,我希望mat-hint显示所有文本,但是现在它在下一个输入的顶部溢出。像这样: 取而代之的是,我希望它根据需要将下一个输入向下推以显示其所有文本。我试图将显示块成块,但没有帮助。
另一个mat-hint(“必填!”)不受影响也很重要。
如果上述操作不可行(在不影响“ Required!”或大量scss的情况下完成),那么我可以满足于在mat-hint上具有最大高度,并控制溢出文本省略号。但是,当我添加最大高度时,文本会被截断,但不会以省略号结尾(即使在具有text-overflow: ellipsis
之后也是如此)。
是否有任何样式建议使它响应更快? 感谢您的提示或建议。
解决方法
您可以通过将mat-hint
替换为position: absolute
来使position: static
块回到文档流中:
:host ::ng-deep .mat-form-field-subscript-wrapper {
position: static;
margin-bottom: 15px;
}
,
在CSS下方应用。
mat-hint {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
请参见Stackblitz
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。