如何在角度材料中显示全文并在菜单项中换行 [英] How to show full text and wrap in menu item in angular material

问题描述

我正在尝试制作一个通知系统，所以我正在使用角度材料中的 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

我的component.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

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