HTML 电子邮件 - 不能限制宽度

Question

我负责“ reshape ”我们的 IT 部门通信。我想用纯 HTML/CSS 来发送我们的电子邮件通知，以确保它的可移植性。

下面是代码，它在 Outlook 中看起来完全符合我的要求，但是一旦将内容添加到主内容中，单词就不会正确换行，如果任何内容超过主内容窗口的大约 90%，其他表格组件开始拉伸(stretch)!

我在表格的所有级别尝试了各种“自动换行”和“溢出”的组合，但我似乎无法做到。

我的最终目标是让整个表格固定宽度，任何长格式信息都向下扩展。

<table style="width: 550px; border: 1px solid gray; border-collapse: collapse; font-family: Arial; color: #282828;">
  <tr style="border: 1px solid gray;">
        <td style="height: 75px; width: 80px; text-align: center; font-size: 60px; font-weight: bold; color: White; background : #007F0E;border-bottom: 1px solid gray;">i</td>
        <td style="height: 75px; padding-left: 15px; font-size: 22px;font-weight: bold;border-bottom: 1px solid gray; color: #282828;">Information</td>
        <td style="height: 75px; padding-right: 15px; text-align: right; font-weight: bold; border-bottom: 1px solid gray;">
          <table>
            <tr>
              <td><div style="height: 36; text-align: right; font-weight: bold; font-size: 18px; color: #0088CE">company name</div></td>
            </tr>
            <tr>
              <td><div style="height: 36;text-align: right; font-size: 22px;font-weight: bold; color: #282828;">Information Systems</div></td>
            </tr>
          </table>
        </td>
        <td style="width: 20px; background : #007F0E;border-bottom: 1px solid gray;"></td>
    </tr>
    <tr>
      <td colspan="99" style="font-family: Arial; height : 300px; padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px; vertical-align: top; text-align: left;">This is the main TD</td>
    </tr>
    <tr>
        <td colspan="99" style="background: #EEEEEE;font-size: 12px; text-align: center; height : 20px; border-Top: 1px solid gray;"><b>IT Helpdesk </b><b style="color: #0088CE">&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;</b><b>Ext : </b> <a href="">XXXX</a><b style="color: #0088CE">&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;</b><b>Email : </b> <a href="mailto:">Link</a><b style="color: #0088CE">&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;</b><b> Portal : </b> <a href="">Link</a></td>
    </tr>
</table>

非常感谢任何帮助，这个小问题让我需要很长时间才能克服!

好:

不好(这只是随机的、自动换行的文本):

Answer 1

您的 html 中有一些错误:

• 右标题部分不需要嵌套表格。只是 <div>份量足够。
• 您应该为“信息”和“公司名称”设置宽度<td>细胞以防止任意包装。
• 你的 colspan值应为 colspan="4" , 不是 colspan="99"

无论如何，要解决您的问题，您可以添加 style="table-layout: fixed;"添加到您的主表格元素，让您自己设置更可预测的表格布局。

https://css-tricks.com/fixing-tables-long-strings/