css 大块文本的Angular /材质样式网格提示

ctrmrzij 于 2023-01-18 发布在 Angular

关注(0)|答案(3)|浏览(166)

我正在使用“材质”处理Angular 9项目。
我这里有一个演示示例：https://stackblitz.com/edit/mat-hint-styling-issue?file=src/app/app.component.html
我正在使用带有mat-hint的输入。通常mat-hint会包含少量文本，但也有可能文本会非常大。我想让mat-hint的样式在这种情况下更具响应性。
理想情况下，我希望mat-hint显示所有文本，但现在它溢出到下一个输入的顶部。x1c 0d1x相反，我希望它根据需要向下推下一个输入，以显示其所有文本。我尝试将显示设置为块，但没有帮助。
另一个mat提示（“必需！”）不受影响也很重要。
如果上面的方法不可行（不影响“Required！”或大量的scss），那么我可以在mat-hint上设置一个max-height，并用省略号控制溢出文本。然而，当我添加一个max-height时，文本被截断，但不以省略号结束（即使在有了：text-overflow: ellipsis）。
有没有造型建议让这个React更灵敏？谢谢你的任何提示或建议。

css

来源：https://stackoverflow.com/questions/63509695/angular-material-style-mat-hint-for-big-chunks-of-text

3条答案

按热度按时间

cotxawn71#

您可以通过将position: absolute替换为position: static，将mat-hint块带回文档流：

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

- 一个

赞(0）回复(0）举报 2023-01-18

6mzjoqzu2#

适用于css以下。

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

参见Stackblitz

赞(0）回复(0）举报 2023-01-18

jyztefdp3#

所以我也遇到了mat-hint在两行后被截断的问题。但是覆盖MAT_FORM_FIELD_DEFAULT_OPTIONS似乎是我的解决方法。添加提供程序并将subscriptSizing设置为dynamic将不再截断任何文本。

{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { subscriptSizing: 'dynamic' } }

赞(0）回复(0）举报 2023-01-18

我来回答

css 大块文本的Angular /材质样式网格提示

3条答案

相关问题

热门标签

最新问答