如何实现文本长短变化时宽高固定的CTA按钮？

针对你需要无论文本长短，CTA按钮宽高始终一致的需求，结合你提供的使用AMPscript的邮件模板代码，以下是修改后的可直接使用的代码，核心通过固定容器尺寸、控制文本溢出实现：

<!-- 修正语法错误并添加固定宽高设置 -->
<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <!-- 外层容器保留原有边距，按钮固定尺寸在内层定义 -->
    <td style="padding: 10px 50px;" align="center">
      <table width="200" height="60" cellspacing="0" cellpadding="0" border="0">
        <tr>
          <!-- 按钮核心容器：固定宽高、样式、文本控制 -->
          <td style="border: 2px solid #eee0d5; bgcolor: #eee0d5; 
                     width: 200px; height: 60px; line-height: 1.2; 
                     padding: 0 10px; text-align: center; 
                     overflow: hidden; text-overflow: ellipsis; 
                     white-space: nowrap;" align="center">
            <a href="%%=RedirectTo(@XXXXXXXX)=%%" title="" alias="" conversion="false" 
               data-linkto="%%=RedirectTo(@XXXXXXXX)=%%" 
               style="text-decoration: none; display: block; width: 100%; height: 100%; 
                      color: #000; font-size: 16px; text-transform: uppercase; font-weight: 600;">
              THE CTA PLEASE
            </a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

关键修改说明： #

• 修复原代码中<table style="<tr">的语法错误，移除无效样式
• 给内层按钮table设置固定width（200px）和height（60px），确保按钮尺寸不随文本内容变化
• 添加overflow: hidden; text-overflow: ellipsis; white-space: nowrap：文本过长时自动截断并显示省略号，维持按钮宽度稳定
• 设置line-height: 1.2配合text-align: center实现文本垂直+水平居中；若允许文本换行，可移除white-space: nowrap，但需确保文本行数不超过容器高度
• 将a标签设为display: block; width: 100%; height: 100%，保证整个按钮区域可点击

可选调整： #

• 根据需求修改width/height数值，自定义按钮大小
• 调整text-overflow和white-space属性，适配不同的文本显示需求

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