CSS：中间使用 flexbox 省略号，在 safari 中中断答案

【问题标题】：CSS: ellipsis in middle using flexbox, breaks in safariCSS：中间使用 flexbox 省略号，在 safari 中中断
【发布时间】：2016-10-18 15:34:05
【问题描述】：

我正在尝试使用 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 中正常工作？

【问题讨论】：

标签： html css safari flexbox

【解决方案1】：

我通过为.less-important 和.more-important 指定flex: 属性使其工作：

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

【讨论】：

为此我整天都在把脸砸在桌子上......我想知道是否只需要明确告知 Safari。无论哪种方式，这都很棒。谢谢。
Flexbox 可能真的很挑剔——尤其是“默认行为”——从浏览器到浏览器。如果您还没有，我强烈建议您收藏github.com/philipwalton/flexbugs
感谢您的资源！很有帮助。
太棒了，fwiw，添加text-direction: ltr 可以看到.more-important 的结尾而不是开头。