使用环绕文字删除菜单项之间的多余空间

Question

我有一些菜单项需要翻译，在某些语言中，文本必须换行以容纳较长的文本。

菜单是 UL>LI 元素的 flexbox 行，其中包含 A 标签。

<ul>
    <li>
        <a href="#">
            Ce que nous faisons
        </a>
    </li>
    <li>
        <a href="#">
            Logiciels que nous supportons
        </a>
    </li>
    <li>
        <a href="#">
            les industries
        </a>
    </li>
        <li>
        <a href="#">
            Entreprise
        </a>
    </li>
</ul>

当文本不换行时，每个菜单项之间的间距相等，菜单感觉平衡且可读。然而，一旦 A 标签中的文本开始换行，浏览器似乎会保留一些额外的空白，从而在菜单元素之间形成大而不均匀的间隙，看起来不正确。

这将是我想要的结果：

我通过手动设置前两项的宽度（以像素为单位）来创建此结果。对于我的用例不实用，但它说明了我希望动态实现的目标。当项目换行时，容器中不会保留额外的空格，菜单项之间的空间是均匀的。

我能找到的唯一影响这个额外空白的 CSS 是将

width: min-content;

添加到我的 A 标签。然而，这在另一个方向上走得太远了，打破了每一个空间并产生了这样的东西：

有人建议使用 width: min-content 的组合； + 不间断的空格以达到预期的效果。然而，有太多的语言、菜单项和潜在的响应断点使这个成为一个实用的解决方案。