如何显示全文并以斜角材料包裹菜单项

问题描述

我正在尝试创建一个通知系统，所以我使用的是角材料中的mat-menu.我增加了menu-item的宽度，但问题是它没有显示完整的内容.它只显示一行中的文本.

I am trying to make a notification system, So I am using the mat-menu from angular material. I've increased the width of menu-item but the problem is that it is not showing the full content. It is only showing the text which comes in one line.

但是，如果文本超出了此行，我想将文本换行到新行

but I want to wrap the text on a new line if it exceeds that line like here

我的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;
}

请告诉我该怎么做.

推荐答案

mat-menu-item类具有静态的line-height和静态的height至48px，这使其无法自动换行.

The mat-menu-item class has static line-height and static height to 48px that is preventing it from word wrapping.

::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;
}

要设置菜单宽度，请使用以下内容.

To set menu width, use the following.

::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

这篇关于如何显示全文并以斜角材料包裹菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！