如何消除HTML电子邮件中的尾随空格?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (78)

我正在编码一个HTML电子邮件模板,为我们的用户提供一个临时密码来登录他们的帐户。但是,我试图去掉通常添加到HTML电子邮件元素中的尾随空格,这样如果用户选择行,他们就可以复制密码而不需要额外的字符。

我尝试使用div元素包装密码,因为这样可以去掉空格,但是如果用户单击并拖动要选择(与双击相反),仍然会选择额外的空格,如下所示:

以下是代码:

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

要重现这个问题,请确保不要双击div,只需在行开始之前单击鼠标,然后将鼠标一直拖到右边。现在,不仅有文本的div被选中,而且在它之后还有一些额外的空间。

我尝试的第二个解决方案是将密码文本转换为一个不可见的输入字段,因此当用户尝试选择它时,只选择输入字段中的文本。我还使它的可读性,以确保用户不会尝试键入它。这在一开始非常好,除了一些电子邮件客户端,比如AndroidMail,密码区域显示一个闪烁的光标,因为客户端软件试图把它当作一个输入字段。

以下是这方面的代码:

...
<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)当用户单击并拖动要选择的密码时,使用另一种方法从密码中删除尾随空格?

谢谢

提问于
用户回答回答于

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

<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>
用户回答回答于

尾随空格出现在一些用户,而不是其他用户,这取决于他们的浏览器和操作系统。例如,我复制了你的HTML,没有得到尾随空格。

但是,如果你想要修复它,可以使用这个JavaScript,这将使元素的宽度更小。

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

如果你想要的话,可以将overl-x属性设置为可见的,这样文本就会显示为相同,或者你可以将其设置为滚动,因为用户无论如何都会复制文本,所以如果他们能够全部读取文本,这并不重要。

扫码关注云+社区

领取腾讯云代金券