Как показать полный текст и завернуть в пункт меню в угловом материале

Question

Я пытаюсь сделать систему уведомлений, поэтому я использую 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 в дополнение к style="white-space: normal" на вашей кнопке ....

как класс 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;
}

Stackblitz

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

---

Пожалуйста, обратитесь к этой проблеме, спецификация материала не допускает перенос слов на кнопки.

https://github.com/angular/material/issues/582

---

Ссылка Текстовая метка

Не. Не переносите текст. Для максимальной удобочитаемости текстовая метка должна оставаться на одной строке.

https://material.io/design/components/buttons.html#anatomy