Mjml: How to use "text-align-last" on mj-text?

Created on 14 Mar 2017  路  2Comments  路  Source: mjmlio/mjml

Most helpful comment

Hey @kvnol, I doubt text-align-last is well supported across email clients, as it's not even standard across web browsers (not supported on IE and needs a prefix on Firefox). For those reasons, we won't add it as an attribute available for mj-text.

Anyway, if you still want to use it, you can use it with plain HTML either inline or with embedded styles:

<mjml>
  <mj-head>
    <mj-style>
      #align-last { 
        text-align: justify; 
        -moz-text-align-last: right; 
        text-align-last: right; 
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>

          <mj-text>
            <!-- inline -->
            <p style="text-align: justify;text-align-last: right;">Lorem Khaled Ipsum is a major key to success. They never said winning was easy. Some people can鈥檛 handle success, I can. The weather is amazing, walk with me through the pathway of more success. Take this journey with me, Lion!
            </p>
            <!-- embedded styles -->
            <p id="align-last">Lorem Khaled Ipsum is a major key to success. They never said winning was easy. Some people can鈥檛 handle success, I can. The weather is amazing, walk with me through the pathway of more success. Take this journey with me, Lion!
            </p>
          </mj-text>

        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

Online demo: https://mjml.io/try-it-live/HyCiRdSie

All 2 comments

Hey @kvnol, I doubt text-align-last is well supported across email clients, as it's not even standard across web browsers (not supported on IE and needs a prefix on Firefox). For those reasons, we won't add it as an attribute available for mj-text.

Anyway, if you still want to use it, you can use it with plain HTML either inline or with embedded styles:

<mjml>
  <mj-head>
    <mj-style>
      #align-last { 
        text-align: justify; 
        -moz-text-align-last: right; 
        text-align-last: right; 
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>

          <mj-text>
            <!-- inline -->
            <p style="text-align: justify;text-align-last: right;">Lorem Khaled Ipsum is a major key to success. They never said winning was easy. Some people can鈥檛 handle success, I can. The weather is amazing, walk with me through the pathway of more success. Take this journey with me, Lion!
            </p>
            <!-- embedded styles -->
            <p id="align-last">Lorem Khaled Ipsum is a major key to success. They never said winning was easy. Some people can鈥檛 handle success, I can. The weather is amazing, walk with me through the pathway of more success. Take this journey with me, Lion!
            </p>
          </mj-text>

        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

Online demo: https://mjml.io/try-it-live/HyCiRdSie

@ngarnier Thanks a lot! No problems for this mode of use. :metal:

Was this page helpful?
0 / 5 - 0 ratings

Related issues

samatcd picture samatcd  路  4Comments

plaisted picture plaisted  路  4Comments

zarikadzer picture zarikadzer  路  3Comments

lucasnantonio picture lucasnantonio  路  4Comments

iwanaga-sakura picture iwanaga-sakura  路  4Comments