css3 flex 省略号,CSS：使用flexbox的中间省略号，在safari中的中断

我试图在使用flexbox而不是float的两段内容之间创建一个省略号。我需要的效果可能永远不会与浮动工作。CSS：使用flexbox的中间省略号，在safari中的中断

第一个“列”包含的信息不如第二列中的信息重要，因此应该在第二列之前的任何事情之前截断。

这种效果在Chrome和FireFox中运行良好，但在Safari中失败。

我使用的正确版本的Safari根据caniuse显示完全支持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;

}

Truncate this text because it is less important

The important text

No ellipsis

Important stuff

Less important content

Way more important info that will cause ellipsis

这里是正在发生的截图在Safari中：

如何正确使用Safari？

2016-06-16

KevBot