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

Question

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

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

这种效果在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; 
 
}

<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

我得到它的工作通过指定.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>