Angular Material外观为outline带标签的输入框占位符CSS设置

当使用outline外观且带mat-label的输入框时，你的CSS样式误作用到标签上，主要是两个原因：缺少省略号生效的必要属性，以及标签继承了不必要的样式。下面是修正后的方案：

修正后的CSS代码 #

.myFormField {
  display: block;
  width: 100%;

  /* 仅针对输入框的占位符设置省略号 */
  .mat-input-element::placeholder {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap; /* 必须添加，否则省略号不生效 */
  }

  /* 重置标签样式，避免被占位符样式影响 */
  .mat-form-field-label {
    text-overflow: unset;
    overflow: visible;
    white-space: normal;
  }
}

关键说明 #

1. 补充white-space: nowrap：text-overflow: ellipsis生效需要三个属性配合：text-overflow: ellipsis、overflow: hidden、white-space: nowrap，你之前的代码缺少最后一个，导致占位符无法截断。
2. 重置标签样式：在outline外观下，mat-label和输入框处于同一容器内，容易继承到overflow等样式，所以需要明确重置标签的相关属性，保证标签正常换行显示，不会被错误截断。

你的HTML代码无需修改，保持原样即可。

内容的提问来源于stack exchange，提问作者Bijay