使用AWS Cognito的HTML邀请邮件，如何去除登录信息高亮后的空格？

针对你遇到的用户高亮用户名/安全代码时末尾出现空格、<pre>标签在邮件中无效且无法使用JavaScript的情况，提供以下可行方案：

• 用带行内样式的<span>强制控制空格
  邮件客户端对行内CSS兼容性较好，给包裹登录信息的<span>添加white-space: nowrap样式，同时严格清理模板中变量前后的多余空格（包括换行、缩进空格）。示例模板代码：

  <p><strong>Username: <span style="white-space: nowrap; margin: 0; padding: 0;">{username}</span></strong></p><p><strong>Security Code: <span style="white-space: nowrap; margin: 0; padding: 0;">{securityCode}</span></strong></p>
  

  关键是确保{username}和{securityCode}变量与前后标签、文本之间没有多余空格，避免渲染时被解析为空格字符。

• 用<code>标签替代<pre>
<code>作为行内代码标签，多数邮件客户端都支持，且不会像<pre>那样保留换行和多余空格。同样要注意变量周围无冗余空格，示例：

  <p><strong>Username: <code style="padding: 0; border: none;">{username}</code></strong></p>
  <p><strong>Security Code: <code style="padding: 0; border: none;">{securityCode}</code></strong></p>
  

• 排查Cognito变量输出
  测试时直接在模板中写死登录信息（比如JoeBloggs@twitter.com），看高亮时是否还会出现空格。如果消失，说明是Cognito填充变量时自动追加了空格，需要检查用户池配置或变量生成逻辑，确保输出的纯文本无多余空格。

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