2

I have a screenshot as shown below which I have to replicate in HTML/CSS.

enter image description here

Attached is the fiddle which I am able to replicate at this moment. I am coding HTML email so that's why I am using inline styling in the fiddle.



Problem Statement:

I am wondering what inline styles I need to add in the fiddle so that I am able to replicate the above screenshot meaning line break between the characters.

I know it can be achieve by padding-left padding-right but still I am not able to replicate as it in the screenshot.

The snippets of code which I have used in order to achieve the above screenshot are:

<tr>
   <td style="padding-bottom: 3%;text-align:left;padding-left:10%;">booking  start date: Thursday 2nd of November 2017 03:15 AM</td>
   <td style="text-align:center;padding-bottom: 3%;padding-left:10%;">booking end date:  Thursday 16th of November 2017 03:15 AM</td>
</tr>
flash
  • 1,455
  • 11
  • 61
  • 132

1 Answers1

2

Maybe u can use <br> for breaking the lines.

Working example: https://jsfiddle.net/79k6oxmq/

<table cellpadding="0" cellspacing="0" border="0" width="100%" class="mobile" style="margin: 0 auto;" align="center">       

        <tr>
          <td>
            <table cellpadding="0" cellspacing="0" border="0" width="100%" style=" font-size:20px;padding-top:2%;">
              <tr>
                <td style="text-align:center; padding:0 10% 3% 10%;">booking  start date:<br>Thursday<br> 2nd of November 2017<br> 03:15 AM</td>
                <td style="text-align:center; padding:0 10% 3% 10%">booking end date:<br>  Thursday<br>16th of November 2017<br>03:15 AM</td>
              </tr>   
            </table>
          </td>
        </tr>

    </table>
  • line break doesn't seems to work in html email. Do you have experience coding in html email ? – flash Jun 21 '18 at 02:47
  • Although your fiddle looks good but I am not sure we can use br tags in html email. – flash Jun 21 '18 at 02:49
  • 1
    https://teamtreehouse.com/community/is-there-a-reason-hes-not-using-p-for-the-text-in-the-email –  Jun 21 '18 at 02:56
  • 1
    You may refer to the above link –  Jun 21 '18 at 02:56
  • I read the link, and it states that we should omit p tags as it is treated as
    s which can bring up all sorts of issues with padding and margins. And we should be using
    tags for the line breaks.
     – flash Jun 21 '18 at 13:56
  • Hi, I have one quick question, can we use ` ` for letter or word spacing in html email ? – flash Jun 22 '18 at 01:26
  • 1
    Why would you need to add a   ? –  Jun 22 '18 at 14:42
  • In order to give letter spacing between text. That's why I want to add `&nbsp` Will it work for all html email clients ? – flash Jun 23 '18 at 19:22
  • Also I have similar [question](https://stackoverflow.com/questions/51003595/email-design-looking-different-in-outlook-in-comparison-to-other-email-clients/51003795?noredirect=1#comment89001186_51003795). I am wondering if you can help me out. – flash Jun 23 '18 at 22:38