5

I have a String being returned from an Apex method as follows,

public class TestController{
    @AuraEnabled
    public static String getAddress(){
        Address userAddress = [Select Address from User where id =: UserInfo.getUserId()].Address;
        return userAddress.street + '\r\n' + userAddress.state;
    }
}

and I'm using this string to display the address in a lightning component.

The string displays with the address, but doesn't replace '\r\n' with a line break. I get the following output

Street State

I even tried using '< br/>' instead, which shows up as it is on the component

street< br/>state

I want to include the line break within the String being returned from the method.

Thanks in advance for your reply!

4
  • 2
    I've used <br /> in Visualforce, and then when you show the message in VF you need to add the <apex:pageMessages ... escape="false" />. I know you aren't doing visualforce but there may be an equivalent – EricSSH Aug 29 '16 at 20:32
  • 1
    Excellent suggestion! There is indeed an Aura Tag that renders the string with unescaped html. – James Aug 29 '16 at 20:41
  • 1
    Sweet! Let me know if I can put this down as an answer – EricSSH Aug 29 '16 at 20:42
  • I was working on answering the question myself. Gave you the credit. If you want, please do post the answer, I'll accept that instead. :) – James Aug 29 '16 at 20:59
10

Thanks to EricSSH's suggestion of escape="false", I did a quick search for any Aura tags that would escape HTML, and found https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_aura_unescapedHtml.htm

This did help me include a line break within a String with the use of '< br/>' and displaying it on the component as follows

<aura:unescapedHtml value="{!v.yourString}" />
2
  • I've tried with aura:unescapedHtml tag. But It's not working – Dibyaranjan Sahoo Nov 6 '17 at 9:27
  • This is working – Srujan Aug 4 '18 at 8:07
4

I needed a solution that didn't require modifying the string and found this to work in Chrome and Firefox.

<pre>{!v.yourString}</pre>

The <pre/> html tag diplays text in a fixed-width non-wrapped text, but the following CSS made it blend in with the rest of the page.

.THIS pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    font-family: inherit !important;
}
1
  • This helped me quite a bit, thanks! Quick note for posterity: when playing around, I found it wasn't actually necessary to use <pre>. A standard <div> with the white-space and word-wrap CSS you applied worked for me, and didn't require the font-family to be overridden. – Matthew Souther May 31 '19 at 18:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.