Wrapping Text in Growl

UI Components for Angular
Post Reply
91vines
Posts: 2
Joined: 04 Oct 2019, 20:37

04 Oct 2019, 21:02

I am trying to get the text in growl to wrap using primeng 4.0.1. Specifically, I'm putting a file path into the growl, and it's such a long file path that it doesn't fit on one line. I just want it to wrap to the next line, but it won't do that.

I have tried a number of things. First, I tried modifying the css. Second, I tried creating a div to hold the growl and creating a style class for that div, setting word-wrap to bread-word and overflow-wrap to break-word.

Originally, I had no css for the growl. The css I added (below) will change the text color successfully, but it seems word-wrap and overflow-wrap do not work as they should.

/deep/.ui-growl-message {
float: left;
color: purple;
word-wrap:break-word !important;
overflow-wrap: break-word !important;

}
html looks like this:

<p-growl [(value)]="msgs" sticky="false"></p-growl>

Also, this topic is related but did not ultimately work for me.
viewtopic.php?f=35&t=49311&p=152120&hil ... rd#p152120

Moonwalker
Posts: 1
Joined: 15 Sep 2019, 02:34

07 Oct 2019, 12:19


91vines
Posts: 2
Joined: 04 Oct 2019, 20:37

09 Oct 2019, 16:28

Thanks! Yes that was helpful. I ended up just needing to specify the width like so:

/deep/.ui-growl-message {
float: left;
color: purple;
word-wrap:break-word !important;
overflow-wrap: break-word !important;
width: 85%;
}

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests