I have an issue where while vewing a long text fields data in a standard layout the spacing between para's are preserved. Looks neat. However, when I am trying to read and display the same data in an LWC component it does not preserve the formatting and looks crappy.

Standard View

Standard view

LWC component

Then when im displaying using the lwc component

How I preserve the formatting?

Here is my code snippet

<tr class="tr">
              <td class="data">Services Requested :</td>
              <template if:true={hasData}>
                <td class="td">{erateBasicInfo.Services_Requested__c}</td>
              <template if:false={hasData}> <td class="td"></td></template>
  • What do you have in field? just new lines or also HTML tags? have you tried using lightning-formatted-rich-text or <pre> tag
    – Raul
    Sep 28, 2022 at 14:16
  • I just have text in the field. No HTML tags. Let me try lightning-formatted-rich-text Sep 28, 2022 at 14:34
  • @Raul Thanks! The <pre> tag worked. Please post as answer ill select it. Sep 28, 2022 at 14:45

2 Answers 2


To display the preformatted tags either use <pre> tag.

  • lightning-formatted-rich-text did not work, but <pre> tag did it! Thanks a lot! Sep 29, 2022 at 9:01

just use lightning-formatted-text instead of lightning-formatted-rich-text

You must log in to answer this question.

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