CSS/JS 在（自动）换行/文本换行之前删除空格

Question

我在一行中有 3 个元素：2 个文本被分隔线分开。

<div class="wrapper">
    <div>this is my extra long text</div>
    <div class="divider">|</div>
    <div>text2</div>
</div>

这些元素位于具有最大宽度的容器内，如果它们太长，则会导致文本破裂/换行。

我的问题： 一旦左侧文本中断，左侧文本到分隔线的间距就会增加。我认为这是因为文本在空白之后被扭曲，但保留了该行中的空间。

我做了一个小提琴来展示我的问题：https://jsfiddle.net/4857bb0s/15/

我该如何解决这个问题？

编辑：

它看起来像（注意左侧文本和分隔线之间不需要的空格）：

它应该看起来像：

Answer 1

你可以尝试一下

style = "text-align: justify"

在您的 div 上，带有长文本。

Answer 2

2023：

inline-size: min-content