function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
javed786javed786 

how i can break the toast message into next line?

In toast message its showing long text message without breaking the line and its showing same line.
just i need to break the message and show in toast meessage.
Best Answer chosen by javed786
Ajay K DubediAjay K Dubedi
Hi Javed,

Please check below Url. I hope this will help you.

Refer this URL: http://sfdcmonkey.com/2018/05/05/multiline-toast-message-lightning-component/
               https://stackoverflow.com/questions/36908445/how-to-display-multi-line-message-in-the-toastr

Please let me know if you have any query.
Please mark it as best Answer if you find it helpful.

Thank You
Ajay Dubedi

All Answers

Ajay K DubediAjay K Dubedi
Hi Javed,

Please check below Url. I hope this will help you.

Refer this URL: http://sfdcmonkey.com/2018/05/05/multiline-toast-message-lightning-component/
               https://stackoverflow.com/questions/36908445/how-to-display-multi-line-message-in-the-toastr

Please let me know if you have any query.
Please mark it as best Answer if you find it helpful.

Thank You
Ajay Dubedi
This was selected as the best answer
javed786javed786
Hi All

Step 1 : create a external CSS file with following code : xyz
.toastMessage.forceActionsText{
     white-space : pre-line !important;
}

Upload it to static resource

Step 2. Add static resource to lightning component ,it looks like below 
<aura:component  access="global" >
   <!--override Toast CSS with external [.CSS] file.-->
    <ltng:require styles="{!$Resource.xyz}" />
</aura:component>

Step 3. Prepaire string with \n from where you break the line into next line.
Example :    'Hello i am first statement \n Hello i am Second statement \n Hello i am Third statement';

Step 4. Your toast message looks linke below.
       var MsgStr =response.getReturnValue();
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            mode: 'sticky',
            message: MsgStr ,
            type : 'success'
        });
        toastEvent.fire();
    
Thank you .....
karan sharma 61karan sharma 61
For Multiple Lines Toast in LWC 

we have to overide 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');
    });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 third Line.';

const evt = new ShowToastEvent({

                title: "Complete Required Fields :",
                message: msg,
                variant: "error",
            });
            this.dispatchEvent(evt);
}

4)Create your toast message like this
var msg = 'This is first line \nThis is Second Line. \nThis is third Line.';
const evt = new ShowToastEvent({
                title: "Complete Required Fields :",
                message: msg,
                variant: "error",
            });
            this.dispatchEvent(evt);