Search code examples
htmlcssangularangular-materialmenuitem

How to insert a 'newline character' in a menu item?

I'm using Angular Material. I need to create a menu where one of the items consists of two large paragraphs. The text is cut off, and only the first paragraph appears.

Can anyone help? Link to the code: https://stackblitz.com/edit/angular-mat-menu-item-newline

Thank you.

Solution

  • I've managed to do it by doing two things:


    • First, add the css described in https://stackblitz.com/edit/angular-qzbutg?embed=1&file=app/menu-overview-example.css:

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


    • Second: Instead of one button with newline characters, which are not supported in HTML, I've created two buttons, with the first having a margin-bottom of 12px to fake a new paragraph.