最小幅まで省略記号を使用して次の行に折り返します

Question

3つの列からなる行を作成したいとします。左側の列は常に左側にあり、右側の2列は一緒に結合されています十分なスペースがない場合は次の行）。これは容易に達成フレックス使用しており、次のようになります。https://jsfiddle.net/znxn9x1r/

ここでキャッチtext-overflow: ellipsisを使用して、いくつかのmin-widthまで収縮されるように、私はまた、中央の列（紫always-right/leftを色付け）たいということです。つまり、ページの幅を小さくするときは、中央の列が最初に縮小を開始し、もはや可能でなくなった後にのみ、右の2列が次の行に折り返されます。

私が達成したいもののモックアップ：

：縮小は、中央の列の min-widthに達したときに

その後、それは以前のように次の行に折り返さなければなりません

黄色の列が残っておらず、行全体が2つの右の列のみから構成されている場合は、次の質問の回答を使用できます。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