CSS:使用flexbox在中间省略,在safari中断

Question

我试图使用flexbox而不是浮点数在两个内容之间创建省略号.我需要的效果可能永远不会与浮动使用.

第一个"列"包含的信息不如第二列中的重要信息,因此应该在第二列中的任何内容之前截断.

这种效果在Chrome和FireFox中运行良好,但在Safari中失败了.

我根据caniuse使用了正确版本的Safari ,它显示了对flexbox的完全支持.

对于实时版本,以及我想要实现的精简版本:

.parent {
  background-color: lightgrey;
  padding: 10px 0;
  display: flex;
  max-width: 410px;
  margin-bottom: 2px;
}
.less-important {
  background-color: lightpink;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 5px;
}
.more-important {
  background-color: lightgreen;
  white-space: nowrap;
  padding: 0 5px;
}

<div class="parent">
  <div class="less-important">Truncate this text because it is less important</div>
  <div class="more-important">The important text</div>
</div>

<div class="parent">
  <div class="less-important">No ellipsis</div>
  <div class="more-important">Important stuff</div>
</div>

<div class="parent">
  <div class="less-important">Less important content</div>
  <div class="more-important">Way more important info that will cause ellipsis</div>
</div>

---

以下是Safari中发生的事情的屏幕截图:

如何才能在Safari中正常使用它？

Answer 1

我通过flex:为.less-important和指定属性来实现它.more-important:

.parent {
  background-color: lightgrey;
  padding: 10px 0;
  display: flex;
  max-width: 410px;
  margin-bottom: 2px;
}
.less-important {
  background-color: lightpink;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 5px;
  flex: 0 1 auto;
}
.more-important {
  background-color: lightgreen;
  white-space: nowrap;
  padding: 0 5px;
  flex: 0 0 auto;
}

<div class="parent">
  <div class="less-important">Truncate this text because it is less important</div>
  <div class="more-important">The important text</div>
</div>

<div class="parent">
  <div class="less-important">No ellipsis</div>
  <div class="more-important">Important stuff</div>
</div>

<div class="parent">
  <div class="less-important">Less important content</div>
  <div class="more-important">Way more important info that will cause ellipsis</div>
</div>