title: How to show full text and wrap in menu item in angular material
body: <p>I am trying to make a notification system, So I am using the <code>mat-menu</code> from angular material. I've increased the width of <code>menu-item</code> but the problem is that it is not showing the full content. It is only showing the text which comes in one line.</p>
  
  <p><a href="https://i.stack.imgur.com/pIiCX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/pIiCX.png" alt="enter image description here"></a></p>
  
  <p>but I want to wrap the text on a new line if it exceeds that line like here</p>
  
  <p><a href="https://i.stack.imgur.com/EtUtO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/EtUtO.png" alt="enter image description here"></a></p>
  
  <p>my <code>compontent.html</code> </p>
  
  <pre><code>  &lt;button mat-button [matMenuTriggerFor]="notification"&gt;&lt;mat-icon&gt;add_alert&lt;/mat-icon&gt;&lt;/button&gt;
    &lt;mat-menu #notification="matMenu" [overlapTrigger]="false" class="my-full-width-menu"&gt;
      &lt;button mat-menu-item style="white-space: normal"&gt;
        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.
      &lt;/button&gt;
      &lt;button mat-menu-item&gt;Item 2&lt;/button&gt;
    &lt;/mat-menu&gt;
  </code></pre>
  
  <p>and <code>CSS</code> is</p>
  
  <pre><code>.mat-menu-panel.my-full-width-menu {
    max-width: none;
    width: 100vw;
    margin-left: -8px;
    margin-top: 24px;
  }
  </code></pre>
  
  <p>Please tell me how to do that.</p>