html - 如何定位电子邮件客户端 (Microsoft Outlook) 中的特定链接？

Question

我正在尝试为某些电子邮件链接添加分词符，但不想将样式应用于所有内容。

如果我应用以下 CSS，所有内容(包括链接)都会中断到以下行:

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

这导致:https://gyazo.com/60e081771f7de04402da60dcad63ea6e

但是，当我尝试使用以下 css 将换行符仅应用于特定元素时，换行符不起作用:

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

此 css 结果为:https://gyazo.com/23f0a413e21b668bc713dbb7a5af90ff

我使用的 HTML 是:

<span class='word-break'><a href='www.google.com'>long_link_000000000000000000000</a></span>
<span class='word-break'>test.email@evenlongertest.com</span>

我尝试了 CSS 的多种变体，但似乎无法将样式专门应用于链接。如果我将颜色更改为红色以测试选择，它在浏览器中有效，但在电子邮件客户端中无效。

Answer 1

解决方案

出于某种原因，规则(断字)仅在应用于父级时才生效 <td>元素。

当我使用以下(丑陋)时它起作用了:

HTML:

<table class='word-break'><tr><td><a href='mailto:test.email@evenlongertest.com'>test.email@evenlongertest.com</a></td></tr></table>

CSS:

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