How to show toast message in multiple lines in a Lightning Web Component

Question

I have a requirement where I need to display my toast message in multiple lines in my LWC. I tried using \n and
but they are not working. Please assist.

Answer 1

For Multiple Lines Toast in LWC

we have to override CSS :

1. Create a CSS file and add in static resource

File Content :

.toastMessage{

    white-space: break-spaces !important;

}

2. Import That static resource file in your component

import { loadStyle } from 'lightning/platformResourceLoader';

import CUSTOMCSS from '@salesforce/resourceUrl/{yourfileName}';

a) Define variable like : isCssLoaded = false;

3. Call it in reRenderCallback

renderedCallback(){

    if(this.isCssLoaded) return
    this.isCssLoaded = true;
    loadStyle(this,CUSTOMCSS).then(()=>{
        console.log('loaded');
    })
    .catch(error=>{
        console.log('error to load');
    });

}

4)Create your toast message like this :

var msg = 'This is first-line \nThis is Second Line. \nThis is the third Line.';

    const evt = new ShowToastEvent({
                title: "Complete Required Fields :",
                message: msg,
                variant: "error",
            });
            this.dispatchEvent(evt);

Answer 2

Have a read of this article on SFDC Monkey that covers this exact issue! (I've used this and it works great)

http://sfdcmonkey.com/2018/05/05/multiline-toast-message-lightning-component/