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?

Improve this question

1 Answer 1

Reset to default
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.

Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.