HTML邮件中Word-break/Word-wrap CSS在Office 365的异常问题

关于Office 365自带断行样式的说明 #

Office 365（包括网页版Outlook及新桌面端Outlook）的邮件渲染逻辑和Win10上的Outlook 2016存在差异：Outlook 2016依赖Word渲染引擎，而Office 365采用浏览器内核但会对HTML邮件应用内置的样式重置，其中就包含针对长文本的自动断行规则，会忽略部分常规CSS属性（比如word-break: normal），导致标题在非预期位置强制换行。

具体解决建议 #

• 固定单元格宽度约束：给包含标题的<td>同时设置HTML属性width和内联CSS样式width，比如<td width="600" style="width:600px;">，明确宽度范围减少自动断行触发；同时搭配word-break: keep-all; word-wrap: nowrap;强制文本尽量保持连续
• 使用非换行空格锁定词组：把标题中需要保持连续的词组之间的空格替换为 ，比如将"Easter Special Offer"改为"Easter Special Offer"，避免词组被拆分断行
• 添加微软专属样式前缀：在<td>的style中加入mso-word-wrap: normal; mso-line-height-rule: exactly;，这类微软专属样式会被Office 365的渲染引擎优先识别，覆盖内置的断行规则
• 控制标题文本长度：尽量让标题适配Office 365的单栏显示宽度，避免超长文本触发内置的自动断行逻辑

修正后的横幅代码示例 #

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="600" style="width:600px; word-break: keep-all; word-wrap: nowrap; mso-word-wrap: normal; padding: 15px 20px;">
      <h2 style="margin:0; padding:0; mso-line-height-rule: exactly; font-size:24px;">Spring Exclusive Sale&nbsp;—&nbsp;Save Up To 50%</h2>
    </td>
  </tr>
</table>

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