带有文本转换的跨度中的额外空间

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 更改为“大写”。

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

这不会影响单词后面的空格，例如没有多余的空间。