Search code examples
htmlcsshtml-email

text underline breaks between lower case letters on html email

I am having this issue where using text-decoration: underline is skipping spaces between lower case letters. I tried "text-decoration-skip-ink: none" that doesnt seem to work nor do I think thats the solution never seen this before. Not really sure how to troubleshoot this

    <td>
<b><span style="text-decoration: underline 1px; font-size:15px;font-family:Arial,Helvetica Neue,Helvetica,sans-serif; color: #1C2A5B; text-decoration-skip-ink: none;">Estrogen-Alone Therapy</span></b></td>

enter image description here

Solution

  • Good one. Not sure but I do have a solution for you. Instead of the underline, and since its a span, you can do the following:

    Change your code from this:

    <tr>
    <td>
        <b><span style="text-decoration: underline 1px; font-size:15px;font-family:Arial,Helvetica Neue,Helvetica,sans-serif; color: #1C2A5B; text-decoration-skip-ink: none; display:inline-block">Estrogen-Alone Therapy</span></b>
    </td>
</tr>

    To this:

    <tr>
    <td>
        <b><span style="border-bottom: 1px solid orange; padding-bottom:10px; font-size:15px;font-family:Arial,Helvetica Neue,Helvetica,sans-serif; color: #1C2A5B; text-decoration-skip-ink: none; display:inline-block">Estrogen-Alone Therapy</span></b>
    </td>
</tr>

    And you can even adjust the spacing underneath your text. It's not necessarily a "Fix", but a workaround. All I did was that since the underline piece wasn't playing nice, I removed it, and added a border to the bottom, and padding to adjust the height/space between the word and the underline itself. It will look like this(before and after): enter image description here

    Please note: If this was an "A" tag that had the issue, you could also add "display:inline-block;" to it for the same effect. I didn't add it to this one because a span is already inline.

    Happy coding.