javascript - 如何显示全文并在有 Angular Material 的菜单项中换行

Question

我正在尝试制作一个通知系统，所以我正在使用 Angular Material 中的 mat-menu。我增加了 menu-item 的宽度，但问题是它没有显示全部内容。它只显示一行中的文本。

但是如果文本超出了这里的那一行，我想换行

我的 compontent.html

  <button mat-button [matMenuTriggerFor]="notification"><mat-icon>add_alert</mat-icon></button>
  <mat-menu #notification="matMenu" [overlapTrigger]="false" class="my-full-width-menu">
    <button mat-menu-item style="white-space: normal">
      Learn one way to build applications with Angular and reuse your code and abilities to build
      apps for any deployment target. For web, mobile web, native mobile and native desktop.
    </button>
    <button mat-menu-item>Item 2</button>
  </mat-menu>

和CSS是

.mat-menu-panel.my-full-width-menu {
  max-width: none;
  width: 100vw;
  margin-left: -8px;
  margin-top: 24px;
}

请告诉我该怎么做。

Answer 1

mat-menu-item类有静态line-height和静态height到48px即防止它自动换行。

::ng-deep button.mat-menu-item {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    outline: 0;
    border: none;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    /** set line height to desired height */
    line-height: 18px;
    /** set height to auto */
    height: auto;
    padding: 0 16px;
    text-align: left;
    text-decoration: none;
    max-width: 100%;
    position: relative;
}

要设置菜单宽度，请使用以下命令。

::ng-deep div.mat-menu-panel {
    min-width: 112px;
      /** set width to 500px */
    max-width: 500px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 48px);
    border-radius: 4px;
    outline: 0;
}

堆栈 Blitz

https://stackblitz.com/edit/angular-qzbutg?embed=1&file=app/menu-overview-example.css