Angular javascript Primeng growl不会将文本换行到下一行

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

import { Component } from '@angular/core';
import import { MessageService } from 'primeng/api';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  providers: [MessageService]
})
export class YourComponent {
  msgs: Message[] = [];

  constructor(private messageService: MessageService) {}

  showGrowlMessage() {
    this.msgs = [];
    this.msgs.push({severity:'info', summary:'Message', detail:'This is a long text that will wrap to the next line.'});
    this.messageService.add({severity:'info', summary:'Message', detail:'This is a long text that will wrap to the next line.'});
  }
}

.ui-growl-message {
  white-space: pre-wrap;
}