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.

2 Answers 2


For Multiple Lines Toast in LWC

we have to override CSS :

  1. Create a CSS file and add in static resource

File Content :


white-space: break-spaces !important;


  1. 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;

  1. Call it in reRenderCallback


if(this.isCssLoaded) return
this.isCssLoaded = true;
    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",
  • why directly adding the mentioned css to the css file in lwc will not work? Jul 22, 2022 at 3:09
  • 1
    for overriding LWC standard component CSS we need to import CSS file. Jul 23, 2022 at 13:33

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


  • 1
    You cannot use it in LWC - cannot modify elements from shadow DOM Sep 18, 2019 at 8:10
  • I am facing the same issue as I am using LWC here. @David can u suggest a way to make it work in LWC. Sep 18, 2019 at 10:51

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .