Angular / Material-样式mat-h​​int适用于大块文本

编程问答 2022-08-15

问题描述

我正在使用Material在Angular 9项目中工作。

我在这里有一个演示示例：https://stackblitz.com/edit/mat-hint-styling-issue?file=src/app/app.component.html

我正在使用带提示的输入。通常，提示会包含少量文本，但是文本可能会很大。如果发生这种情况，我想将垫提示样式设置为更敏感。

理想情况下，我希望mat-h​​int显示所有文本，但是现在它在下一个输入的顶部溢出。像这样：

enter image description here

取而代之的是，我希望它根据需要将下一个输入向下推以显示其所有文本。我试图将显示块成块，但没有帮助。

另一个mat-h​​int（“必填！”）不受影响也很重要。

如果上述操作不可行（在不影响“ required！”或大量scss的情况下完成），那么我可以满足于在mat-h​​int上具有最大高度，并控制溢出文本省略号。但是，当我添加最大高度时，文本会被截断，但不会以省略号结尾（即使在具有text-overflow: ellipsis之后也是如此）。

是否有任何样式建议使它响应更快？ 感谢您的提示或建议。

解决方法

您可以通过将mat-hint替换为position: absolute来使position: static块回到文档流中：

:host ::ng-deep .mat-form-field-subscript-wrapper {
  position: static;
  margin-bottom: 15px;
}

Forked Stackblitz

,

在CSS下方应用。

mat-hint {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

请参见Stackblitz

angularangular-materialangular9sass