如何创建HTML邮件以避免用户复制粘贴时误选多余空格

问题根源 #

原代码中<b>标签内部存在换行和缩进空格，Outlook的文本选择逻辑会将这些用于排版的空白字符判定为可选中的内容，导致用户拖拽选择密码时容易连带选中末尾的多余空格。

优化后的HTML写法 #

<p style="margin-top: 0;">
 <span style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 14px; color:#222222; line-height: 1.6;"> 
  <span style="color: #222;">We have recently upgraded the security for accounts.</span>
  <br><br> To complete the account upgrade process, you will need to set up a new password. Below, you will find a temporary password that you can use to log in and create a new, stronger password of your choice. 
  <br><br>
  <b>Temporary Password: <span style="font-size: 22px; margin-left: 5px; border:1px solid #ccc; color: #222222; background-color: #ffffff; padding: 5px 10px; border-radius: 5px; user-select: all;">{####}</span></b>
 </span>
</p>

关键优化点 #

• 紧凑排版密码区域：将<b>标签内的换行和缩进全部移除，让"Temporary Password:"和密码容器<span>在同一行紧凑排列，消除冗余空白字符。
• 添加user-select: all样式：给密码容器添加内联样式user-select: all，用户点击密码区域即可一次性全选密码内容，无需拖拽选择，从根源避免误选空格的问题（Outlook 2016及以上版本支持该属性）。
• 保留原有样式兼容性：其他样式保持不变，确保邮件在不同客户端的显示效果一致。

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