How to target specific links in email clients (Microsoft Outlook)?

Question

I'm trying to add a word break to some email links, but don't want to apply the style to all the content.

If I apply the following CSS, all content (including the links) breaks onto the following line:

html, body, table {
    word-break: break-all !important;
}

This results in: https://gyazo.com/60e081771f7de04402da60dcad63ea6e

However, the line break doesn't work when I try to apply it only to specific elements using the following css:

table tr td span.word-break * {
    word-break: break-all !important;
}

This css results in: https://gyazo.com/23f0a413e21b668bc713dbb7a5af90ff

The HTML i'm using is:

<span class='word-break'><a href='www.google.com'>long_link_000000000000000000000</a></span>
<span class='word-break'>[email protected]</span>

I have tried multiple variations of the CSS but can't seem to apply the style specifically to the links. If I change the colour to red to test the selection, it works in the browser but not in the email client.

Answer 1

Solution

For some reason the rule (word-break) only took effect when applied to the parent <td> element.

It worked when I used the following (ugly):

HTML:

<table class='word-break'><tr><td><a href='mailto:[email protected]'>[email protected]</a></td></tr></table>

CSS:

table.word-break tr td {
    word-break: break-all;
    border: none;
}