如何自定义Angular Material的mat-menu-item以显示多行文本？

Angular Material的mat-menu-item默认设置了固定高度和overflow: hidden，导致超出内容被隐藏，所以你的多行文本只显示第一行。可以通过以下方法解决：

自定义CSS覆盖默认样式 #

给目标菜单项添加自定义类，取消固定高度并允许文本换行：

样式代码 #

/* 针对MDC风格的Angular Material（较新版本） */
.custom-multi-line-item {
  height: auto !important;
  white-space: normal;
  padding: 8px 16px; /* 调整内边距适配多行内容 */
}

/* 针对旧版非MDC风格 */
/* .custom-multi-line-item {
  height: auto !important;
  white-space: normal;
  padding: 8px 16px;
} */

HTML代码 #

<mat-menu>
  <div mat-menu-item class="custom-multi-line-item">
    <div>Text1</div>
    <div style="font-size: 12px; color: #666;">Text2</div>
  </div>
</mat-menu>

配合Flex布局组织内容 #

通过Flex布局让菜单项内部内容垂直排列，同时确保容器自适应高度：

<mat-menu>
  <button mat-menu-item class="custom-multi-line-item">
    <div style="display: flex; flex-direction: column; align-items: flex-start; gap: 4px;">
      <span>Text1</span>
      <span style="font-size: 10px; color: gray;">Text2</span>
    </div>
  </button>
</mat-menu>

注意：优先使用自定义类而非直接修改全局.mat-mdc-menu-item样式，避免影响其他菜单组件的默认表现。

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