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 at 3:09
  • for overriding LWC standard component CSS we need to import CSS file. Jul 23 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.