角材料垫菜单文本不适合

Question

我正在使用 angular material 中的 mat-menu 组件。但是，内容不适合菜单。 我不想使用 mat-select，因为我想显示一个与下拉列表中的值不同的按钮。

现在我的问题是，如何在菜单中显示全文？使用任何类型的多行或工具提示？

   <button mat-button [matMenuTriggerFor]="menu">{{row.menuShortText}}</button>
   <mat-menu #menu="matMenu">
      <span mat-menu-item>This is a very long text that does not fit</span>
      <span mat-menu-item>this fits</span>
      <span mat-menu-item>this fits</span>
      <span mat-menu-item>this fits</span>
      <span mat-menu-item>this fits</span>
   </mat-menu>

Answer 1

如果工具提示没问题，您可以将其添加到跨度：

<button mat-button [matMenuTriggerFor]="menu">menu</button>
<mat-menu #menu="matMenu">
  <span mat-menu-item matTooltip="This is a very long text that does not fit">
    This is a very long text that does not fit</span>
  <span mat-menu-item>this fits</span>
  ...
</mat-menu>

别忘了导入MatTooltipModule