Angular MatBadge数字超99无法完整显示的解决方法咨询

matBadge默认会对超过两位的数字自动截断并显示省略号，这是由其内置的样式规则导致的，以下是两种可行的修复方案：

方案1：自定义CSS覆盖截断样式 #

给matBadge所在元素添加自定义类，然后通过全局样式覆盖默认的截断行为：

1. 在模板中添加自定义类：

<button mat-button matBadge="123" matBadgePosition="above after" class="full-number-badge">
  通知
</button>

2. 在全局样式文件（如styles.scss）中添加样式：

.full-number-badge .mat-badge-content {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  padding: 0 6px; /* 按需调整内边距，适配长数字 */
  min-width: auto; /* 取消默认最小宽度限制 */
}

方案2：手动控制徽章显示内容 #

在组件中处理通知数字的显示逻辑，直接输出完整数字或自定义格式：

1. 组件代码：

notificationCount = 123;

// 自定义显示逻辑，这里直接返回完整数字，也可改为超过99显示"99+"
get badgeDisplayValue(): string {
  return this.notificationCount.toString();
}

2. 模板绑定：

<button mat-button [matBadge]="badgeDisplayValue" matBadgePosition="above after" class="full-number-badge">
  通知
</button>

如果使用方案1，注意必须将自定义样式放在全局样式文件中，避免组件样式隔离导致失效。若数字过长，可适当调整徽章的内边距和字体大小，确保完整显示。

内容的提问来源于stack exchange，提问作者T. Morciani