Question

我想创建一个由三列组成的行，其中左列始终位于左侧，右侧两列连接在一起（即，如果没有足够的空间，则将它们组合到下一行）。这可以使用flex轻松实现，可能如下所示：https://jsfiddle.net/znxn9x1r/

这里的问题是我还希望使用always-right/left将中间列（紫色min-width）缩小到某些text-overflow: ellipsis。这意味着当我开始降低页面的宽度时，中间列应该首先开始收缩，并且只有在不再可能之后，然后右边的两列应该换行到下一行。

我想要实现的模型：

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

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

这确实表现得应该如此，但只有在之后，正确的组已经包装了：

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

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

这是我的代码，是否有可能用纯HTML / CSS实现我想要的东西？

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

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

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

1 个答案: