How to wrap text on PrimeNg's dropdown?

Question

How do I wrap text that exceeds width on PrimeNg's dropdown field? I have tried using .p-dropdown-label { word-wrap: break-word; } but it did nothing. Thanks in advance!

Answer 1

I managed to do it by adding the following rule to styles.css:

.p-dropdown-item.p-ripple {
  white-space: normal;
}

You can also achieve the same result by using ng-deep on the component stylesheet, but keep in mind that ng-deep is deprecated.

:host ::ng-deep .p-dropdown-item.p-ripple {
  white-space: normal;
}