是否可以使用 flex-wrap 并添加省略号来指示项目被包装？

Question

Something like this: Imagine the third element is wrapped an we show an ellipses for it

如果这些是项目：

.container { 
  height: 50px; 
  background-color: grey;
  display: flex;
  flex-wrap:wrap;
}

.item {
  text-overflow: clip;
  height: 50px;
  background-color: pink;
  margin: 0px 5px 10px 5px;
}

.item.injected {
  flex:1;
  text-align: right;
  background-color: red;
  margin: 0px 5px 10px 5px;
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div> 
  <div class="item injected">Info 4</div>
</div>

但我们希望在包装最后一个元素时不进行包装。

Answer 1

CSS 中的 Flex-wrap 和省略号是不同的东西。

是的，您可以在 CSS 中同时使用 flex-wrap 和省略号。

"flex-wrap" 属性用于指定flex项目是强制成单行还是换行到多行。 flex-wrap 属性允许启用行堆叠的控制方向。它用于指定单行或多行格式以在弹性容器内弹性项目。

"省略号" 显示在内容区域内，减少了显示的文本量。

我已经创建了一个示例，您可以通过点击下方联系我们 link:

examplehttps://jsfiddle.net/zuqf6v8k/1/

是否可以使用 flex-wrap 并添加省略号来指示项目被包装？

Is it possible to use flex-wrap and also add ellipses to indicate the items are wrapped?

css

text

overflow

flexbox