边缘填充会导致文本在换行和不换行之间交替

Question

从我对正在发生的事情的幼稚理解中至少建议标题。对于这个问题，我将重点放在左上角的值'13，239,984,40'。

因此在第一张图片中，我有一个网格。红色表示数字填充所占的区域（左侧填充），黄色表示数字以及$符号所占的区域。可以观察到，因为黄色占据的区域不足以形成红色，因此红色导致换行，这意味着我们正在“包装文字”。

接下来，我增加列的宽度。这允许$与数字位于同一行。

我现在要做的是将padding-left的值减小为0。正如预期的那样，两者仍然在同一行。

现在，我减小列的宽度，并且两者在同一行上。文本“不可见”扩展到下一列，并且不会创建新行。这表明该文本是非包装的。

这表明：

• 填充=>自动换行
• 无填充=>不换行文字

$和$都在范围之内，并且我们在CSS中定义不应包装。这只会在Edge中发生，而不会在其他（主要）浏览器中发生。任何非零值都将导致包装动作。我不需要解决方案，因为删除了填充工作。我只想知道为什么会这样。