HTML邮件中writing-mode与transform失效，如何实现垂直文本？

问题描述 #

我在HTML邮件里用CSS实现文本垂直显示，以下代码在浏览器中表现正常，但Microsoft Outlook完全不支持writing-mode和transform属性，渲染效果失效：

<div
style="
    height: 100%;
    text-align: center;
    width: fit-content;
    max-height: 90pt;
    overflow-y: hidden; /* 隐藏溢出文本 */
    text-overflow: ellipsis;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    display: inline-block;
    word-wrap: break-word;
    overflow-wrap: break-word;
"
>
    <p
        style="
        color: red;
        height: 100%;
        text-align: center;
        width: fit-content;
        max-height: 90pt;
        overflow-y: hidden;
        text-overflow: ellipsis;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        display: inline-block;
        word-wrap: break-word;
        overflow-wrap: break-word;
        "
    >
        This should be vertically aligned
    </p>
</div>

已尝试的方案及问题 #

• 试过writing-mode: tb-rl和VML方案，均无效果
• 更新1：用mso-rotate: 90实现了文本旋转，但容器宽度无法根据文本换行自动调整

  <td rowspan="2" style="mso-rotate: 90">
    <span style="color: red">
      <p>This should be vertically aligned</p>
    </span>
  </td>
  

• 尝试用layout-flow: horizontal，容器高度能适配最长单词，但添加<br/>后完全不生效

  <td rowspan="2">
    <span style="color: red" style="layout-flow: horizontal">
      <p>This should be vertically aligned</p>
    </span>
  </td>
  

• 更新2：手动给每个单词加<br/>解决了宽度适配问题，但长单词或大量短单词场景下显示效果很差

  <td rowspan="2" style="mso-rotate: 90">
    <span style="color: red">
      <p>This <br/> should <br/> be <br/> vertically <br/> aligned</p>
    </span>
  </td>
  

问题根源 #

Outlook使用Word的渲染引擎，而非主流浏览器的WebKit/Gecko引擎，导致大部分现代CSS属性（比如writing-mode、transform）都不支持，必须用Outlook专属的mso-*属性或VML语言来实现特殊排版。

可行替代方案 #

1. 软换行+自动断词优化 #

针对长单词，用<wbr>软换行标记或word-break: break-all（结合Outlook兼容写法），让旋转后的文本能自动适配宽度，同时避免手动拆分的繁琐：

<td rowspan="2" style="mso-rotate: 90; word-break: break-all; mso-word-break: break-all;">
  <span style="color: red;">
    <p>This<wbr/> should<wbr/> be<wbr/> vertically<wbr/> aligned</p>
  </span>
</td>

2. 正确的VML实现方式 #

之前的VML写法可能有误，以下是兼容Outlook的垂直文本VML代码，记得在HTML头部添加VML命名空间xmlns:v="urn:schemas-microsoft-com:vml"：

<v:rect style="width:20pt;height:200pt;" strokecolor="none">
  <v:textbox style="mso-fit-shape-to-text:true;">
    <div style="color:red; text-align:center;">This should be vertically aligned</div>
  </v:textbox>
</v:rect>

3. 表格单元格堆叠 #

如果文本内容可控，直接把每个单词放在单独的表格单元格里，自然垂直排列，完全不需要旋转，兼容性最好：

<td rowspan="2">
  <table cellpadding="0" cellspacing="0">
    <tr><td style="color:red; padding:2px 0;">This</td></tr>
    <tr><td style="color:red; padding:2px 0;">should</td></tr>
    <tr><td style="color:red; padding:2px 0;">be</td></tr>
    <tr><td style="color:red; padding:2px 0;">vertically</td></tr>
    <tr><td style="color:red; padding:2px 0;">aligned</td></tr>
  </table>
</td>

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