Currently, I am facing an issue in Angular/Javascript where the text in growl is not wrapping using primeng 4.0.1. The problem arises when inserting a long file path into the growl, causing it to overflow from a single line. I am looking for a solution that will allow the text to wrap to the next line instead.
I have attempted several approaches to fix this issue. Initially, I tried adjusting the CSS properties. Subsequently, I experimented with creating a div element to encapsulate the growl and defining a custom style class for that div, setting word-wrap to break-word and overflow-wrap to break-word as well.
The initial css code I implemented successfully changes the text color; however, the word-wrap and overflow-wrap styles do not function as intended:
/deep/.ui-growl-message {
float: left;
color: purple;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
In the HTML structure, the p-growl component is used like so:
<p-growl [(value)]="msgs" sticky="false"></p-growl>
Apologies if this seems like a basic question as UI development is not my forte. Please refer to the attached image for a visual representation of the symptom:
Symptom is attached for reference. https://i.sstatic.net/3odNm.png