cssangularnebular

How to break lines in Nebular Menu Items

I am using a nebular menu and I wonder how I can break the line if the word exceeds the length of the menu. I have tried

::ng-deep .nb-theme-default nb-menu .menu-item a {
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal;
}

in my component's css file, but none of this styles work. It is as if they are never applied.

Solution

  • In order to break word correctly in <a> tag, you need to add :

    display:block;

    Final result:

    ::ng-deep .nb-theme-default nb-menu .menu-item a {
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal;
  display:block;
}

    Please note that .nb-theme-default is the class used in your <body> tag