Search code examples
javascripthtmltypescriptionic-frameworkhtml-email

Line break doesn't show correctly when used in a mailto link

ts

 send(): void {
    const body: string = `First Name: ${this.form.value.firstName}` + '\n' + `Last Name:${this.form.value.lastName}`;
    console.log('body', body);
    const url: string = `mailto:[email protected]?Subject=Sell My House&body=${body}`;
    window.open(url);
  }

Console.log shows correctly:

body First Name: sampath
Last Name:lokuge

But why email client doesn't show it correctly

enter image description here

Solution

  • OP's feedback

    I have done it like so: i.e. %0D%0A

    const body: string = `First Name: ${this.form.value.firstName}` + '%0D%0A' + `Last Name: ${this.form.value.lastName}`

    Original

    That is normal behavior for HTML and whitespace. All whitespace is condensed into one, and considered a single space.
    https://developer.mozilla.org/en-US/docs/Glossary/Whitespace

    The css white-space property can fix that white-space: pre-line is likely what you want, but there are other options https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

    Now, weather or not your email clients will respect that css white-space property you'll need to test. Otherwise you may want to add HTML line breaks <br> or wrap each line in a <div> or <p>