PrimeNG v11确认弹窗消息无法换行问题求助

方法1：启用HTML解析 #

PrimeNG v11的confirmationService.confirm()配置支持html属性，将其设为true后，消息内容会被当作HTML解析，此时使用<br>即可实现换行：

export class ConfirmPopupDemo {

    constructor(private confirmationService: ConfirmationService) {}

    confirm(event: Event) {
        this.confirmationService.confirm({
            target: event.target,
            message: 'phrase 1 <br> phrase 2', // 使用<br>实现换行
            html: true, // 开启HTML解析开关
            icon: 'pi pi-exclamation-triangle',
            accept: () => {
                //confirm action
            },
            reject: () => {
                //reject action
            }
        });
    }
}

方法2：通过CSS识别\n换行 #

如果不想启用HTML解析，可以给弹窗消息容器添加CSS样式，让\n被识别为换行符。在组件样式文件或全局样式文件中加入：

.p-confirm-dialog-message {
    white-space: pre-line;
}

之后保持代码里的\n写法即可：

message: 'phrase 1 \n phrase 2',

两种方法都能让两个短语分开展示，避免弹窗过长。

内容的提问来源于stack exchange，提问作者BOS