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, 2016 at 20:32
  • 1
    Excellent suggestion! There is indeed an Aura Tag that renders the string with unescaped html.
    – James
    Aug 29, 2016 at 20:41
  • 1
    Sweet! Let me know if I can put this down as an answer
    – EricSSH
    Aug 29, 2016 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, 2016 at 20:59

2 Answers 2

11

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}" />
3
  • I've tried with aura:unescapedHtml tag. But It's not working
    – ds9972
    Nov 6, 2017 at 9:27
  • This is working
    – Srujan
    Aug 4, 2018 at 8:07
  • If you're fetching your string from value in a text field via an apex controller, you'll need to use myString.replace('\n', '<br/>') to convert the line breaks into HTML. Nov 15, 2021 at 16:40
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. May 31, 2019 at 18:28

You must log in to answer this question.

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