使用省略號直到最小寬度，然後換行到下一行

Question

我想使一行包含三列，其中左列總是在左邊，右邊兩列連接在一起（即一起包裹到下一行，如果沒有足夠的空間）。這是很容易實現使用Flex和可能看起來像這樣：https://jsfiddle.net/znxn9x1r/

這裏美中不足的是，我也想在中間列（紫羅蘭色always-right/left）要地收縮了一些min-width使用text-overflow: ellipsis到。這意味着，當我開始降低頁面寬度時，中間列應該首先開始縮小，並且只有在不再可能時，然後右側兩列應該換行到下一行。

什麼，我想實現樣機：

然後，當收縮達到中間一列的min-width，應該換到下一行之前：

現在，如果沒有左邊的黃色列，整行只包含右邊兩列，我可以使用以下問題的答案：How to keep a flex item from overflowing due to its text?

這確實表現得像它應該，但只有後右組已包裝：

它不縮水中間一欄時，它仍然是在同一行作爲第一黃柱：

^^這不應該發生，有一個省略號足夠的空間！

這是我的代碼，是否有可能實現我想要的純HTML/CSS？

* { 
 
    padding: 5px; 
 
} 
 
#container { 
 
    background-color: lightgreen; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
#always-left { 
 
    background-color: yellow; 
 
    margin: auto; 
 
    margin-left: 0; 
 
} 
 
#right-group { 
 
    margin: auto; 
 
    margin-right: 0; 
 
    display: flex; 
 
} 
 
#shrinkable { 
 
    background-color: violet; 
 
    vertical-align: middle; 
 
    order: 1; 
 
    flex: 0 1 auto; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
} 
 
#not-shrinkable { 
 
    background-color: lightblue; 
 
    vertical-align: middle; 
 
    order: 2; 
 
    flex: 1 0 auto; 
 
}

<div id="container"> 
 
    <div id="always-left"> 
 
    always-left 
 
    </div> 
 
    <div id="right-group"> 
 
    <div id="shrinkable"> 
 
     always-right/left 
 
    </div> 
 
    <div id="not-shrinkable"> 
 
     always-right/right 
 
    </div> 
 
    </div> 
 
</div>

https://jsfiddle.net/mnmyw245/

Answer 1

一個給你涉及柔性容器上禁用flex-wrap: wrap可能工作方法。

#container { 
    background-color: lightgreen; 
    display: flex; 
    /* flex-wrap: wrap;  <-- REMOVE THIS */ 
} 

這會強制所有東西留在同一行上。

然後，當您覺得可以開始包裝時，請使用媒體查詢恢復wrap。

這將包裹控制從瀏覽器中取出並放在您的手中。

下面是一個例子：

@media (max-width: 200px) { 
    #container { flex-wrap: wrap; } 
} 

revised fiddle