使用省略号直到最小宽度，然后换行到下一行

Question

我想制作一个由三列组成的行，其中左列始终位于左侧，右两列连接在一起（即，如果没有足够的空间，则换行到下一行）。使用flex很容易做到这一点，可能如下所示：https://jsfiddle.net/znxn9x1r/

这里的问题是，我也希望中间列（紫色的总是-右/左）可以使用文本溢出：省略号收缩到一些最小宽度。这意味着当我开始降低页面宽度时，中间的一列应该首先开始收缩，只有在不再可能之后，然后右边的两列应该换行到下一行。

我想要实现的目标的模型：

然后，当收缩达到中间列的最小宽度时，它应像前面一样缠绕到下一行：

现在，如果没有左边的黄色列，整行只由右边的两列组成，我可以使用以下问题的答案：如何防止flex项因其文本而溢出？

这实际上是正常的，但只有在正确的组已包装之后：

当它仍然与第一个黄色列在同一行时，它不会收缩中间列：

^^这不应该发生，因为有足够的空间放省略号！

这是我的代码，是否可以用纯HTML/CSS实现我想要的？

* {
  padding: 5px;
}
#container {
  background-color: lightgreen;
  display: flex;
  flex-wrap: wrap;
}
#always-left {
  background-color: yellow;
  margin: auto;
  margin-left: 0;
}
#right-group {
  margin: auto;
  margin-right: 0;
  display: flex;
}
#shrinkable {
  background-color: violet;
  vertical-align: middle;
  order: 1;
  flex: 0 1 auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
#not-shrinkable {
  background-color: lightblue;
  vertical-align: middle;
  order: 2;
  flex: 1 0 auto;
}

html lang-html prettyprint-override"><div id="container">
  <div id="always-left">
    always-left
  </div>
  <div id="right-group">
    <div id="shrinkable">
      always-right / left
    </div>
    <div id="not-shrinkable">
      always-right / right
    </div>
  </div>
</div>

https://jsfiddle.net/mnmyw245/

Answer 1

一种可能对您有效的方法是禁用flex容器上的flex-pack： roll。

#container {
  background-color: lightgreen;
  display: flex;
  /* flex-wrap: wrap;        <-- REMOVE THIS */
}

这迫使一切都保持在同一线上。

然后，当您觉得可以开始包装时，使用媒体查询恢复wrap。

这会将包裹控件从浏览器中移除，并将其放在您的手中。

下面是一个例子：

@media ( max-width: 200px ) {
  #container { flex-wrap: wrap; }
}

修订小提琴