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

2019年7月28日 212次阅读

我想创建一个由三列组成的行,其中左列始终在左侧,右侧两列连接在一起(即,如果没有足够的空间,则将它们包在一起到下一行).这很容易使用flex实现,可能如下所示：
https://jsfiddle.net/znxn9x1r/

《html – 使用省略号直到最小宽度,然后换行到下一行》
《html – 使用省略号直到最小宽度,然后换行到下一行》

这里的问题是我还希望使用文本溢出：省略号将中间列(紫色始终 – 右/左)缩小到一些最小宽度.这意味着当我开始降低页面的宽度时,中间列应该首先开始收缩,并且只有在不再可能之后,然后右边的两列应该换行到下一行.

我想要实现的模型：

《html – 使用省略号直到最小宽度,然后换行到下一行》

然后当收缩到达中间列的最小宽度时,它应该像以前一样换行到下一行：

《html – 使用省略号直到最小宽度,然后换行到下一行》

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

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

《html – 使用省略号直到最小宽度,然后换行到下一行》

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

《html – 使用省略号直到最小宽度,然后换行到下一行》

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

这是我的代码,是否有可能用纯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/

最佳答案 一种可能适合您的方法涉及禁用flex-wrap：包装在Flex容器上.

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

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

然后,当您觉得包装开始没问题时,请使用媒体查询恢复换行.

这会将包裹控件从浏览器中取出并放在您的手中.

这是一个例子：

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

revised fiddle

点赞