css - 防止由 flexbox 布局的居中对齐元素中的文本换行引起的间隙

当使用 flexbox 布局两个文本居中对齐的元素（例如带有图标的消息）时，我们如何防止浏览器处理自动换行引起的模糊间隙？这里的问题与这两个元素（本例中的图标和文本）的容器无关，而与文本元素本身有关。根据文本，文本元素的大小不正确，因为自动换行行为会创建文本中不存在的空格。

如果不亲自看到，很难完全描述这个问题，所以这里有一个 codepen - https://codepen.io/joshdavenport/pen/pooLvNg。我为元素添加了颜色指南，以便您可以看到包含元素的文本何时大于应有的大小。

在最新的 Chrome 中，我们从大尺寸缩小视口，当有足够的空间时，我们看到了良好的行为。文本紧贴其元素：

在多个点，就在文本即将换行之前，文本本身没有明显地创建一个大空间：

然后当它包裹

最后一个例子是我一直希望它看起来的样子。因此，浏览器应该只在需要时将元素边界与文本紧密结合，以此类推，一直到视口大小。

我已经尝试了一堆不同的组合，align-items但justify-content都无济于事，所以似乎是文本节点本身及其渲染导致了这个问题。如果是这样的话，那么我想没有办法解决这个问题，但我把它放在那里，以防有人想出了一个天才的解决方法。

标签： cssflexboxtext-rendering