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

Question

我想制作一行由三列组成的行，其中左边的列总是在左边，右边的两列连接在一起(即，如果没有足够的空间，则换行到下一行)。这很容易使用 flex 实现，可能看起来像这样:https://jsfiddle.net/znxn9x1r/

这里的问题是我还希望中间的列(紫罗兰色 always-right/left)可以使用 缩小到一些 min-width >文本溢出:省略号。这意味着当我开始降低页面宽度时，中间的列应该首先开始收缩，只有在它不再可能之后，右边的两列才应该换行到下一行。

我想要实现的模型:

然后当收缩达到中间列的 min-width 时，它应该像以前一样换行到下一行:

现在，如果没有左侧黄色列并且整行仅由右侧两列组成，我可以使用以下问题的答案:How to keep a flex item from overflowing due to its text?

这确实表现得像它应该的那样，但只是在正确的组已经包装之后:

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

^^ 这不应该发生，省略号有足够的空间!

这是我的代码，是否可以用纯 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;
}

<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-wrap: wrap。

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

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

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

这将环绕控制从浏览器中拿走，交给您。

这是一个例子:

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

revised fiddle