从锚标签组中删除尾随空间
#css #jsx

最近,当我为博客设计一些样式时,我遇到了一个问题,我在JSX中呈现了一块锚标签,它们看起来不正确。

A list of tags with trailing spaces that were underlined

所有链接都有落后的空间,这些空间都被强调了!

我们是怎么来到这里的?

我有一系列标签,它们在<div>中显示,就像这样:

<div>
    {
        tags.map((tag) => (
            <a class="tag" href={`#`}>
                #{tag}
            </a>
        ))
    }
</div>

我不完全理解为什么下划线的,尾随的空间被渲染,并在JavaScript的神嘲笑我时哭泣。

克服它后,我尝试更改word-wrap和其他各种CSS样式来修复链接,但没有成功。我承认,我花了比我预期找到的解决方案更长的时间,我写了这个博客,以使我摆脱未来的自我,不可避免地会再次遇到这个问题。

我们如何克服?

事实证明,如果添加了display: inline-block,它将删除空间中的下划线!

这是一个代码epen,可以显示此LIL CSS的技巧!

结束,保持安全,书呆子。