消除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设置cursor属性，但大多数移动电子邮件客户端都不支持该属性。

有没有人对我提出其他建议：

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

或

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

谢谢！

Answer 1

对于某些用户而言显示尾随空白，而对于其他用户而言则取决于其浏览器和/或操作系统。例如，我复制了你的HTML并没有获得尾随空格。因此，我不建议对它进行核算，因为对于那些一开始就没有得到它的人来说，这看起来有点奇怪。

但是，如果你想尝试修复它，你可以使用这个JavaScript来使元素的宽度变小来解释它。

var element = document.getElementsByClassName('pw-input')[0];
element.style.width = parseInt(window.getComputedStyle(element).getPropertyValue('width'))-10;

如果您愿意，可以将overflow-x属性设置为可见，以便文本显示相同，或者您可以将其设置为滚动，因为用户无论如何都将复制文本，因此无论它们是否可以全部阅读。

Answer 2

内联级别元素的典型问题是，空格实际上是标记中元素与浏览器之间的正常空间并不会将其删除，因为它与您在单词之间放置的空间完全相同必须留下来。

尝试同时选择以下文字，并查看效果

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

我用比我想象的更简单的方式解决了这个问题。代码如下：

<tr style="font-size:0;">
    <td style="font-size:0;" align="center">
        <div style="font-size:0;"><a style="font-size: 30px; text-decoration:none;">{{htmlescape var=$customer.password}}</a></div> 
    </td>
</tr>

Answer 4

在向用户发送临时密码并添加br换行符固定尾随空格的情况下，遇到相同的问题：

<p>
    <strong>User Name:</strong> ^^param_uid^^<br>
    <strong>Temporary Password:</strong> ^^param_pwd^^<br>
</p>

hth，加油....