html - 消除 HTML 电子邮件中的尾随空格

Question

我正在编写一个 HTML 电子邮件模板，为我们的用户提供临时密码以登录他们的帐户。但是，我试图摆脱通常添加到 HTML 电子邮件元素的尾随空格，这样如果用户选择该行，他们就可以复制没有额外字符的密码。

我尝试使用 div 元素来包装密码，因为这样可以去除空格，但是如果用户单击并拖动以选择(而不是双击)，仍然会选择一个额外的空格，如下所示:

代码如下:

...
<tr>
    <td align="center">
        <div>myTempPassword</div>
    </td>
</tr>
....

要重现此问题，请确保不要双击 div，而是在行的开头之前单击并将鼠标一直拖动到右侧。现在不仅带有文本的 div 被选中，而且它后面的一些额外空间也被选中。

我尝试的第二个解决方案是将密码文本变成一个不可见的输入字段，这样当用户尝试选择它时，只会选择该输入字段内的文本。我还把它设为只读，以确保用户不会尝试输入它。一开始效果很好，但在一些电子邮件客户端(如 Android Mail)上，密码区域显示闪烁的光标，因为客户端软件试图将其视为输入字段。

代码如下:

...
<tr>
    <td align="center">
        <input readonly="readonly" class="pw-input" style="width: 270px; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 30px; color: #EA1675; border: none;"
                                                                    type="text" value="myTempPassword" />
    </td>
</tr>
....

为了解决这个问题，我尝试使用 CSS 设置光标属性，但大多数移动电子邮件客户端不支持该属性。

有没有人对我有其他建议:

1) 在不使用 cursor CSS 属性的情况下摆脱我输入字段中闪烁的光标...

或

2) 当用户单击并拖动选择时，使用另一种方法从密码中删除尾随空格？

谢谢!

Answer 1

内联级别元素的典型问题，空白实际上是标记中元素之间的正常空间，浏览器不会删除它，因为它与您在单词之间放置的空间完全一样，它必须保留。

尝试把下面的文字都选中，看看效果

<div>
  mytempPassword
</div>
<div>mytempPassword</div>