CSS：水平変数のサイズに基づいてレイアウトおよびカスタム・ロジック

Question

私は、全体の幅があり、以下の構造

<div class="c0"> 
    <span class="c1">"Text1: Some possibly long text"</span> 
    <span class="c2">Some icon is being displayed</span> 
    <span class="c3">"Text 3: Some possibly long text"</span> 
</div> 

を持って100pxにとアイコン幅があると言う、20ピクセル言います。レイアウトは次のようになります。

1. テキスト1とテキスト3の長さ未満80pxであれば、私はそれがあるとして、いくつかのスペースが左側に残っていると、文字列全体を表示したいです。
2. テキスト1とテキスト3の長さがより80pxで、テキスト1未満40ピクセルで、テキスト3以上40ピクセル、私は省略記号は切り捨てと「テキスト1」「アイコン」「テキスト3を表示したい場合にはテキスト1とテキスト3の長さを超える80pxであり、テキスト1が40ピクセル以上であり、テキスト3以上40ピクセルあれば基本的にテキスト1とテキスト3以外の条件は（2）Iは、
3. を文字列」
4. 反転されます"文字列を切り捨てて省略記号をつけたテキスト1" "アイコン" "テキスト3を表示したい文字列を切り捨てる省略記号 "

これはCSSで実現できますか？私はFlexboxなどで遊んでみましたが、上記を達成する方法を見つけ出すことはできませんでした。

Answer 1

あなたはCSS

.c1, .c3 { 
    width: 40px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

を使用して文字列を切り捨てることができますし、HTMLは次のようになります。

<div class="c0"> 
    <div class="c1">"Text1: Some possibly long text"</div> 
    <div class="c2">Some icon is being displayed</div> 
    <div class="c3">"Text 3: Some possibly long text"</div> 
</div>