Question

我有一个flex-box容器（.search-bar），里面有两个含文本的div（.title）。我希望第二个孩子占用所有额外的空间，并且因为空间有限而成为椭圆形的最后一个。也就是说，第一个孩子应该根据需要进行椭圆化以保持第二个孩子完全显示，而第二个孩子只有在第一个孩子不再可见时才应该进行椭圆化。

演示：

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

最后一个类型标题上的flex-shrink: 0似乎没有做任何事情，最后一个孩子总是那个椭圆化的。

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

这是一个小提琴https://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;
}

小提琴：https://jsfiddle.net/6nbzkkjg/4/

使用@ Andrew在评论中修改

更新了

修改

Answer 2

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

我从flex: 1;移除了align-content: center;和.search-bar {}，因为他们没有做任何事情。

Flexbox在第二个孩子之前进行了优化

2 个答案: