force-showToast - lightning-msg

force:showToast Message Display In Multiple Lines In Salesforce Lightning Component

Lightning Component

Hello guys, today in this post i am going to share a workaround for salesforce lightning force:showToast event to display toast message in multiple lines.

In javaScript string we can use /n escape characters for insert a newline in string. so i have used /n in ‘force:showToast’ event message(string type) attribute, like following code in lightning component javaScript controller :

but still getting no result. 🙁  [display in single line]

single-line toast



This event is handled by the container. It’s supported in Lightning Experience, Salesforce app, and Lightning communities.

Solution/Workaround :

create a external CSS file with following code :

next upload this CSS file in static resource and reference in your lightning component using ltng:require tag.

Check Also : Alternate/Workaround for contains() function in aura:if Condition in Lightning Component
JavaScript Controller :



Happy Learning 🙂

Related Resource :

showToast Doc


(Visited 17,756 times, 1 visits today)


  • Hi,

    I have a requirement. I have an account object and Custom Account object, a field called Segment in Account, If I fill this picklist field then the value will auto populate from Account to custom Account using a formula. now when I am creating a custom account field I need to show a validation error saying that field is not populated using lightning component and apex controller. please help me

  • Thank you man I needed changing some styles in the toast. And your article was spot on. But would you elaborate why it works with a static resource and not with just adding it to the component CSS

    • Maybe, Lightning component’s CSS and Salesforce’s css (SLDS) loads before the external css file. And it overrides the previously loaded with latest one as it’s behaviour of any HTML.

Leave a Reply