在电子邮件中垂直旋转文本

Question

我现在遇到了一个问题，需要在电子邮件正文中以垂直方式设置一些文本，如下图所示： 虽然使用以下CSS代码可以在HTML中将文本垂直排列，但无法在Gmail电子邮件正文中实现相同的效果。

以下是我在Gmail正文中使用的代码：

<div style=" width:50px; float:left; position:relative;padding-top:80px;transform: rotate(-90deg); -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg);"> 
    <h1 id="Header" style="direction: rtl;font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: normal; color: #434242; white-space: nowrap; position:relative; height:auto; "> newsletter 1 </h1> 
</div>

- Anil D

---

你能否展示一下电子邮件正文中完整的竖排文字代码？ - Luke Shaheen

<div style=" width:50px; float:left; position:relative;padding-top:80px;transform: rotate(-90deg); -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg);"> <h1 id="Header" style="direction: rtl;font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: normal; color: #434242; white-space: nowrap; position:relative; height:auto; "> 新闻通讯1 </h1> </div> - Anil D

你只需要支持Gmail作为电子邮件客户端吗？如果你能够让它在Gmail上运行，我可以想象其他的电子邮件客户端（如Outlook）可能会出现问题。 - MrWhite

不需要在所有电子邮件客户端中获取。 - Anil D

Answer 1

在Gmail中，您只能使用内联CSS。请在元素上尝试style = ""

编辑：当然，在Gmail中您不能使用所有CSS属性。这里有一个列表可能会有用。

- Mostafa Shahverdy

---

修改后的答案，请查看。 - Mostafa Shahverdy

你有什么其他的建议吗？ - Anil D

并不完全正确。请记住，电子报设计与网站设计非常不同。您需要忽略所有通常的标准，需要使用表格、内联样式、图像标签等。（来自https://dev59.com/8Wsz5IYBdhLWcg3wQFi2#8015670） - Mostafa Shahverdy

Answer 2

Gmail不支持在正文中使用style标签。 你是否在正文部分使用了style标签？

- Mehul Kaklotar

---

实际上它确实会过滤掉大多数选择器，除非您在它们前面加上 *。同样的情况也适用于属性 - 其中一些属性会被删除。 - mateusza