如何在Outlook的HTML表格td的span中实现长URL自动换行

问题场景 #

使用Outlook发送包含HTML表格的邮件时，<td>中的长URL无法自动换行。尝试用<span>包裹URL并设置word-break: break-all无效；用<p>标签包裹虽能换行，但会在URL前后产生多余换行符，不符合需求。给<span>添加display:block和固定宽度也未解决问题。

解决方案 #

针对Outlook（尤其是桌面版，依赖Word渲染引擎）的CSS兼容性问题，需将换行样式直接应用到<td>元素上，同时保留table-layout: fixed确保表格列宽固定，配合兼容多客户端的换行属性：

修改后的HTML代码 #

<table border=1 cellspacing=0 cellpadding=0 width=577 style="width: 432.75pt; table-layout: fixed; mso-table-lspace: 0; mso-table-rspace: 0;">
  <tr>
    <td><b>Note:</b></td>
    <td style="word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap;">
      The list of affected servers is here: <span style="word-break: break-all;">https://reallyreallyreallylongurlherereallyreallyreallylongurlhere</span><br/>
    </td>
  </tr>
  <tr>
    <td><b>Published Date:</b></td>
    <td>04/24/2024 03:04 PM</td>
  </tr>
</table>

关键说明 #

1. table-layout: fixed：强制表格按指定宽度布局，确保<td>有明确的换行边界，这是URL能换行的基础。
2. <td>级样式：Outlook对<span>的样式支持有限，直接给<td>设置word-break: break-all（强制在任意字符处换行）、overflow-wrap: break-word（在单词边界换行，兼容更多场景）、white-space: pre-wrap（保留空格并自动换行），确保样式能被正确识别。
3. Outlook专属属性：添加mso-table-lspace: 0; mso-table-rspace: 0;消除表格默认的边距，避免布局异常。

内容的提问来源于stack exchange，提问作者made_it_ma