title: Angular material mat-menu text does not fit
body: <p>I am using the mat-menu component from angular material. However, the content does not fit in to the menu.
  I don't want to use mat-select, because i want to show a button with a different value than the values in the dropdown.</p>
  
  <p>Now my question is, how can I show the full text in the menu? With any kind of multi line or tooltip?</p>
  
  <pre><code>   &lt;button mat-button [matMenuTriggerFor]="menu"&gt;{{row.menuShortText}}&lt;/button&gt;
     &lt;mat-menu #menu="matMenu"&gt;
        &lt;span mat-menu-item&gt;This is a very long text that does not fit&lt;/span&gt;
        &lt;span mat-menu-item&gt;this fits&lt;/span&gt;
        &lt;span mat-menu-item&gt;this fits&lt;/span&gt;
        &lt;span mat-menu-item&gt;this fits&lt;/span&gt;
        &lt;span mat-menu-item&gt;this fits&lt;/span&gt;
     &lt;/mat-menu&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/sTweS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sTweS.png" alt="enter image description here"></a></p>