当字体较小时，表情符号比包围标签更宽

Question

在Mac OS X上的Chrome中，我注意到表情符号不能很好地缩小。这是我看到的：

其他浏览器也可能有这个问题；我在这里创建了一个示例：
https://jsfiddle.net/p2pjLd9m/

方格旗延伸包围

有没有办法强制跨度覆盖所显示文本的宽度？

向span添加右填充并不理想，因为我并不总是事先知道span将包含表情符号还是拉丁字符。

增加字体大小也不理想，因为我不想垂直增加文本。我只想让跨度覆盖表情符号，就像它在更大的字体大小上所做的那样。

编辑

这个问题比我最初想象的更加本地化——我只能在Chrome v55中重新创建这些结果




Answer 1

我没有看到同样的问题使用Mac和Chrome在您的小提琴，但你可能想尝试添加显示：inline-block到您的风格的跨度，看看这是否解决了你的问题。