带有文本转换的额外空间

Question

我在申请时注意到

text-transform: uppercase;

到内联块跨度，firefox在文本末尾添加一个空格。请参阅演示：http://jsfiddle.net/matias/kt71jkLz/

此外，如果您使用firebug打开和关闭该css规则，firefox将删除该空格并且永远不会再添加它。 Chrome根本没有添加空间。

HTML

<span>Sample text</span>

CSS

span{display:inline-block; color: red; outline: 1px solid blue;}
span:first-letter{text-transform: uppercase;}

有关如何解决此问题的任何想法？

Answer 1

我知道这有点旧，但我在其中一个电子邮件广告系列中遇到了同样的问题，并设法通过解决方法解决了这个问题。

在一个：     段

在移动CSS中使用类似的东西：

span[class=capital] {
    text-transform:uppercase !important;}

导致在发送后在Outlook的最终电子邮件中显示：

p aragraph

在FF本地，它在全宽和响应宽度上都很好，但是在发送电子邮件之后，两个版本中都显示了空格（但在适当的情况下使用了适当的文本转换）。

在我的情况下，解决方案是将整个单词包装在span中而不是仅包含第一个字母，并将text-transform更改为“capitalize”。

span[class=capital] {
    text-transform:capitalize !important;}

这不影响单词之后的后续间距，例如：没有额外的空间。