Flexbox 椭圆形第一个 child 在第二个之前

Question

我有一个 flex-box 容器 (.search-bar)，里面有两个 text-containing div (.title)。我希望第二个 child 占用所有额外的 space 并成为最后一个椭圆，因为 space 变得有限。即第一个 child 应该根据需要椭圆化以保持第二个 child 完全显示，第二个 child 应该只在第一个 child 不再可见时省略。

演示：

.search-bar {
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 500px;
  background: white;
}

.title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 1;
}

.title:last-of-type {
  flex: 1;
  flex-shrink: 0;
}

.title + .title::before {
  content: '>';
  margin: 0 10px;
}

<div class='search-bar'>
  <div class='title'>
  Doop Doop Doop Doop Doop Doop Doop
  </div>
  <div class='title'>
  Doge Doge Doge Doge Doge Doge Doge
  </div>
</div>

last-of-type标题上的flex-shrink: 0好像没什么作用，最后一个child总是省略号

有没有办法让第一个标题在第二个之前变成椭圆形？

这是一个fiddlehttps://jsfiddle.net/6fs9gc00/

Answer 1

这个好像可以

.title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.title.first {
  flex: 0 1 auto;
}
.title.last {
  flex: 1 0 auto;
}

fiddle: https://jsfiddle.net/6nbzkkjg/4/

编辑： 更新了@Andrew 在评论中的修改

Answer 2

似乎可以通过将 flex: 1; 添加到 .title {} 来实现此目的。如果将宽度更改为 400px（例如），您会看到第二个 div 仍会以省略号截断，但第一个 div 会先截断。

.search-bar {
    display: flex;
    overflow: hidden;
    width: 500px;
    background: #cfcfcf; /* Changed for visibility in Stack Snippet */
}

.title {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    flex: 1;
    flex-shrink: 1;
}

.title:last-of-type {
    flex: 1;
    flex-shrink: 0;
}

.title + .title::before {
    content: '>';
    margin: 0 10px;
}

<div class='search-bar'>
    <div class='title'>
        Doop Doop Doop Doop Doop Doop Doop
    </div>
    <div class='title'>
        Doge Doge Doge Doge Doge
    </div>
</div>

我从 .search-bar {} 中删除了 flex: 1; 和 align-content: center;，因为它们什么也没做。

Flexbox 椭圆形第一个 child 在第二个之前

Flexbox ellipsize first child before second

css

ellipsis

flexbox