4

I am trying to display a long text area in a lightning web component with its line breaks. Unfortunately the "\n" characters are being displayed as spaces in the HTML template rather than line breaks.

I tried the to stringify the long text area in the javascript with the below line:

this.noteText = JSON.stringify(this.record.note.Text__c).replace(/\n/g, '<br />')

Unfortunately, with this approach, the <br> tags are now showing up in the HTML template.

How can we display long text area line breaks from our salesforce database in our LWC HTML?

1 Answer 1

6

Your problem isn't the string, it's the template.

Change your template to include a style that displays line breaks:

<div style="white-space: pre-line">
  {noteText}
</div>

This is because the default white-space behavior in CSS is to collapse all whitespace into one space, including line breaks, tabs, and spaces. If you want extra spaces or line breaks, you need to modify the default behavior, and this is the safest, recommended way to do so. If your content requires preserving more spaces, you can also try pre-wrap instead.

You must log in to answer this question.

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