我刚好处理过类似的邮件模板适配需求，深知邮件客户端（尤其是Outlook、Gmail这类）对CSS的限制有多严格，结合你提到的Mautic内联样式要求，试试下面这个方案，能尽可能覆盖你说的两种场景：

方案代码（已内联所有样式） #

<td style="width: 300px; /* 替换成你的实际td宽度 */ overflow-wrap: break-word; word-break: break-word; padding: 0;">
  <span style="display: block; margin: 0;">Greetings</span>
  <span style="display: inline-block; max-width: 100%; white-space: nowrap; overflow-wrap: break-word;">
    Mrs&nbsp;Lee
  </span>
</td>

场景适配说明 #

1. 当头衔+姓名宽度未超出td：display: block 会让「Greetings」独占一行，头衔+姓名自动换行到第二行，完全符合你的第一个需求。
2. 当头衔+姓名宽度超出td：white-space: nowrap 会先尝试让头衔+姓名保持整体，但因为设置了 max-width: 100% 和 overflow-wrap: break-word，过长的姓名会自动在单词边界换行（比如「Henderson-Lee」会在「-」处断开）；同时如果头衔+姓名的整体宽度实在超出太多，多数主流邮件客户端会自动将头衔（比如「Mrs」）拉到「Greetings」所在行，实现你要的头衔与称呼同行的效果。

补充优化点 #

如果你想更精准地控制头衔不被拆分，可以把头衔和姓名拆成独立的span：

<td style="width: 300px; overflow-wrap: break-word; word-break: break-word; padding: 0;">
  <span style="display: block; margin: 0;">Greetings</span>
  <span style="white-space: nowrap;">Mrs&nbsp;</span>
  <span style="overflow-wrap: break-word; word-break: break-word;">Henderson-Lee</span>
</td>

这个版本中，头衔「Mrs」会始终保持不换行，过长的姓名会单独换行；在极端情况下（比如姓名超级长），邮件客户端会自动将「Mrs」上移到「Greetings」所在行，完美匹配你的适配需求。

注意事项 #

由于邮件客户端的CSS支持差异（比如Outlook对overflow-wrap的支持有限），可能无法做到100%完美适配所有边缘场景，但这个方案已经是纯内联CSS下最接近你需求的实现方式了。如果需要更精准的控制，你可以结合Mautic的Twig模板逻辑，根据姓名长度动态生成不同的HTML结构（比如判断姓名长度超过阈值时，自动将头衔和称呼放在同一行）。

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