消除HTML电子邮件中的尾随空格
我正在编码一个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)当用户单击并拖动以选择?时，使用另一种方法删除密码的尾随空格？
谢谢!
回答 4
Stack Overflow用户
发布于 2018-06-13 04:37:32
尾随空格对某些用户显示，而对其他用户则不显示，这取决于他们的浏览器和/或操作系统。例如，我复制了您的HTML，但没有得到尾随的空格。正因为如此，我不建议考虑这一点，因为对于那些一开始就不了解它的人来说，这看起来可能有点奇怪。
但是，如果您想尝试修复它，您可以使用此JavaScript，它将使元素的宽度变小以解决此问题。
var element = document.getElementsByClassName('pw-input')[0];
element.style.width = parseInt(window.getComputedStyle(element).getPropertyValue('width'))-10;如果您愿意，可以将overflow-x属性设置为visible以使文本显示相同，也可以将其设置为滚动，因为用户无论如何都会复制文本，因此他们是否可以全部阅读都无关紧要。
Stack Overflow用户
发布于 2018-06-13 05:36:15
典型的内联级别元素的问题是，空白实际上是标记中元素之间的正常空格，浏览器不会删除它，因为它与您在单词之间放置的空格完全相同。
尝试选择下面的两个文本，并查看效果
<div>
mytempPassword
</div>
<div>mytempPassword</div>
Stack Overflow用户
发布于 2018-06-13 08:24:52
我用一种比我想象中简单得多的方法解决了这个问题。代码如下：
<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>https://stackoverflow.com/questions/50825366
复制相似问题