Angular mat-form-field 在标签之间添加空格答案

【问题标题】：Angular mat-form-field add space between labelAngular mat-form-field 在标签之间添加空格
【发布时间】：2021-11-14 04:00:50
【问题描述】：

您好，如何将 mat-label 显示为隐藏的一半。

【问题讨论】：

尝试将 CSS 上的行高设置为更大的值，可能是 5 到 10 像素。您可以使用相同的名称覆盖默认 css - 您可以直接从 chrome 开发工具之类的工具中获取它们。
您好，感谢您的回复。哪个类的行高？

【解决方案1】：

在组件css文件中：

mat-form-field {
    line-height 55px !important;

}
or
mat-label{
 line-height 55px !important;

}

或

::ng-deep mat-form-field {
       line-height 55px !important;
}
or
::ng-deep mat-label {
 line-height 55px !important;

}

小心后者，因为它是通用的。您可能必须使用元素的 css 顺序。就像我说的那样，最好的办法是使用 chrome 开发工具查看它，以便获得准确的类图。

【讨论】：

【解决方案2】：

我的临时解决方案是使用 .mat-form-field-appearance-fill .mat-form-field-label-wrapper{ overflow: visible!important; }

【讨论】：

他要求增大高度而不改变 z-index 这不是一个正确的答案。否则标签将浮出定义的框。
是的，我想要。开箱即用的标签
好吧，我想我欠乔治一个道歉
不用担心，非常感谢您的帮助。 line-height 改变了孔 mat-form-field 的高度并使其更大。我只想要相同大小的 mat-form-field 并且只显示剪切标签。所以这条线工作正常，但我不知道是否是一个好的方法。
如果它实现了你的目标，那应该没问题。