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>