我有一个带有表的html电子邮件,其中一个单元格包含一个变量{descriptionLinkified}。该变量包含用户输入的文本。由于此文本可以包含网址,因此我使用javascript在文本中搜索网址,并在其周围添加<a>
标记。另外,我应用内联css样式来拆分链接:
function linkify(text) {
var urlRegex =/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
return text.replace(urlRegex, function(url) {
return '<a href="' + url + '" style="word-break: break-all;"><span style="word-break: break-all;">' + url + '</span></a>';
});
}
var descriptionLinkified = linkify(description);
我想保留url作为锚点的显示名称,因为直接看到完整的url在接收电子邮件时可能很重要。因此,用短文本替换显示名称不是一种选择。
单元格中的其余描述应该正常打破。应用javascript后的最终html如下所示:
<table border="0" cellpadding="5" cellspacing="0" style="border-collapse: collapse; margin: auto auto 0px; padding-right: 10px; padding-left: 10px; background-color: rgb(241, 241, 241);" width="100%">
<tbody>
<tr>
<td style="text-align: left; padding-top: 15px; padding-bottom: 15px; font-family: "Trebuchet MS"; font-size: 16px; text-decoration: none; border-top-color: rgb(199, 199, 199); border-top-width: 1px; border-top-style: solid;" valign="top" width="340">
<strong>Description:</strong></td>
<td style="text-align: left; padding-top: 15px; padding-bottom: 15px; font-family: "Trebuchet MS"; font-size: 16px; text-decoration: none; border-top-color: rgb(199, 199, 199); border-top-width: 1px; border-top-style: solid; -ms-word-break: break-all; -ms-word-wrap: break-word;" valign="top" width="340"><a href="https://books.google.de/books?id=QdNxpPD3QqAC&pg=PA28&lpg=PA28&dq=sharepoint+site+collection&source=bl&ots=oqaA_WQ3UX&sig=ec7Bw6RikAd2f8D9DqmVx0bnP8w&hl=de&sa=X&ved=0ahUKEwiFksmNtZnSAhVsOpoKHbMyA884ChDoAQhhMAk" style="word-break: break-all;"><span style="word-break: break-all;">https://books.google.de/books?id=QdNxpPD3QqAC&pg=PA28&lpg=PA28&dq=sharepoint+site+collection&source=bl&ots=oqaA_WQ3UX&sig=ec7Bw6RikAd2f8D9DqmVx0bnP8w&hl=de&sa=X&ved=0ahUKEwiFksmNtZnSAhVsOpoKHbMyA884ChDoAQhhMAk</span></a></br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</td>
</tr>
</tbody>
根据网址,Outlook只会将网址拆分为第二行,这会使表格溢出。 e.g:
https://books.google.de/books?id=QdNxpPD3QqAC&pg=PA28&lpg=PA28&dq=sharepoint+site+collection&source=bl&ots=oqaA_WQ3UX&sig=ec7Bw6RikAd2f8D9DqmVx0bnP8w&hl=de&sa=X&ved=0ahUKEwiFksmNtZnSAhVsOpoKHbMyA884ChDoAQhhMAk
Outlook将网址拆分为
第一行:
https://books.google.de/books?
第二行:
id=QdNxpPD3QqAC&pg=PA28&lpg=PA28&dq=sharepoint+site+collection&source=bl&ots=oqaA_WQ3UX&sig=ec7Bw6RikAd2f8D9DqmVx0bnP8w&hl=de&sa=X&ved=0ahUKEwiFksmNtZnSAhVsOpoKHbMyA884ChDoAQhhMAk
如果我在word-break: break-all
内联样式中包含td
,它在Outlook中100%有效,但当然,文本的非网址部分也会被拆分。
有没有人知道为什么Outlook会在td
标记中接受该属性,但是当它在锚点中时会以不同的方式处理它?</ p>
有关如何解决此问题的任何建议?