I have a lightning component which I am using for quickaction and I currently show an error message which is passed from the controller as a String. The problem is, I want to show the error message in multiple lines instead of a single line. Below is the relevant code for the same:

var action2 = component.get("c.callfun");
            action2.setParams({"accId" : recId});
            action2.setCallback(this, function(response) {
            var state = response.getState();
                errMsgs = response.getReturnValue();
                var errmsg= new Array(); 
                errmsg = errMsgs.toString().split("."); 
                var i;
                "title": "Error",
                    "message": errMsgs

            var dismissActionPanel = $A.get("e.force:closeQuickAction");

the sample error message being returned from my apex controller is "this is a test error. this is another error. this could be the last error." - basically each being separated by a full stop (".") - Hence I was trying to split the same which again didnt yield any results.

Is there any way to display these in separate lines in the toast window - possibly with a bullet point or something?

  • I need this a week or so ago as well. I tried everything I could think of and was not able to have multiple lines on the message as all html tags and \r\n were escaped. I ended up splitting the message into the title and message. Only works if you only have two lines though....Will be watching this.
    – Eric
    Oct 10, 2017 at 15:50
  • Thanks for the reply Eric. Could you please tell me how splitting the message into title and message worked? Like did you do the splitting up of the string in the Javascript or at the Apex Controller level?
    – Sid
    Oct 11, 2017 at 1:15
  • You can do it whatever way works best for you
    – Eric
    Oct 11, 2017 at 3:26
  • I tried it this way - didnt work : for(i=0;i<errmsg.length;i++){ resultsToast.setParams({ "title": "Error", "message": errmsg[i]+"" }); } resultsToast.fire();
    – Sid
    Oct 11, 2017 at 5:54
  • Your title is still Error and not the first part of the string. You cannot have multiple lines in either the title or message and setting the params multiple times will only preserve the last iteration
    – Eric
    Oct 11, 2017 at 5:56

2 Answers 2


You can accomplish this using jquery to change the css of the toast component.

Add this line before your toast $('.forceToastManager').css('white-space', 'pre-wrap');

Then just add \n's wherever you want line breaks in your message. In your case you can replace . with \n and I believe it will work as you want.

  • Did this worked for you? I tried Jquery method, but no luck. Nothing is happening.
    – Ajay
    Feb 1, 2018 at 15:29
  • @Ajay yes, it's working for me in chrome and firefox. Are you using a different browser? It may affect it. Otherwise make sure that this is actually being called before. So put it in your afterScriptsLoaded method, and make sure your method is being called after it, you may set up your init to happen before scriptsLoaded so just check that. Otherwise I don't know why it wouldn't work for you
    – Aequitas
    Feb 1, 2018 at 22:28

Add the following line to your component:

<aura:html tag="style">.toastMessage.forceActionsText{white-space : pre-line !important;}</aura:html>

This overrides the standard style class toastMessage forceActionsText which displays the text.

You must log in to answer this question.

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