フレックスの子にテキストオーバーフローの省略記号がありません

Question

私はflexのコンテナを持っています。私は中間の子供が全体のスペースを取るので、私はそれを設定しますflex: 1。ここまでは順調ですね。

次のレベルでは中子に2人の子供がいるので、私もそれをフレックスに設定したいと思います（私を失った場合はスニペットにスキップしてください）、最初の子は省略記号のスタイルを設定します。さて、省略記号は機能しなくなりました。

ボタンをクリックすると、すべてが短いテキストでうまくいくことがわかります。

アイデア？クラスの.elは幅が設定されていないためだ

function toggle() { 
 
    var el = document.querySelector('.el'); 
 
    el.textContent = el.textContent === 'short' ? 'long long long text' : 'short'; 
 
}

.wrapper { 
 
    display: flex; 
 
    width: 200px; 
 
    align-content: stretch; 
 
    padding: 5px; 
 
    min-width: 0; 
 
    border: 1px solid 
 
} 
 

 
.wrapper .child2 { 
 
    flex-grow: 1; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
    min-width: 0; 
 
} 
 

 
.el { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.child1 { 
 
    background: red; 
 
} 
 

 
.child2 { 
 
    background: blue; 
 
} 
 

 
.child3 { 
 
    background: green; 
 
} 
 

 
.wrapper>* { 
 
    padding: 5px; 
 
}

<div class="wrapper"> 
 
    <div class="child1">child1</div> 
 
    <div class="child2"> 
 
    <div class="flex"> 
 
     <div class="el">long long long text</div> 
 
     <div>a</div> 
 
    </div> 
 
    </div> 
 
    <div class="child3">child3</div> 
 
</div> 
 

 
<button onclick="toggle()">Toggle ellipsis text</button>

Answer 1

にoverflow:hidden;text-overflow: ellipsis;を置きます。

IEはバグがあり、またchild2がそれを必要とするoverflow

理由を必要とするものの実際には、Mosh Feu suggests in his answerとして、min-width: 0も動作し、いなければならない、クロスブラウザは、それはまた、フレックスアイテムであるためである、とフレックスこの場合、min-widthのアイテムはautoにデフォルト設定されており、コンテンツよりも小さくすることはできないため、overflow: hidden（またはvisible以外の値）を追加すると、min-width: 0となります。

function toggle() { 
 
    var el = document.querySelector('.el'); 
 
    el.textContent = el.textContent === 'short' ? 'long long long text' : 'short'; 
 
}

.wrapper { 
 
    display: flex; 
 
    width: 200px; 
 
    align-content: stretch; 
 
    padding: 5px; 
 
    min-width: 0; 
 
    border: 1px solid 
 
} 
 

 
.wrapper .child2 { 
 
    flex-grow: 1; 
 
    overflow: hidden; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
    min-width: 0; 
 
} 
 

 
.el { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.child1 { 
 
    background: red; 
 
} 
 

 
.child2 { 
 
    background: lightblue; 
 
} 
 

 
.child3 { 
 
    background: green; 
 
} 
 

 
.wrapper>* { 
 
    padding: 5px; 
 
}

<div class="wrapper"> 
 
    <div class="child1">child1</div> 
 
    <div class="child2"> 
 
    <div class="flex"> 
 
     <div class="el">long long long text</div> 
 
     <div>a</div> 
 
    </div> 
 
    </div> 
 
    <div class="child3">child3</div> 
 
</div> 
 

 
<button onclick="toggle()">Toggle ellipsis text</button>

Answer 2

。下のCSSを使用すれば正常に動作します：

.el { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: 3em; 
} 

Answer 3

これはあなたの欲しいものですか？

私はちょうど.wrapper .child2にoverflow: hidden;を追加するには、.child2

function toggle() { 
 
    var el = document.querySelector('.el'); 
 
    el.textContent = el.textContent === 'short' ? 'long long long text' : 'short'; 
 
}

.wrapper { 
 
    display: flex; 
 
    width: 200px; 
 
    align-content: stretch; 
 
    padding: 5px; 
 
    min-width: 0; 
 
    border: 1px solid 
 
} 
 

 
.wrapper .child2 { 
 
    flex-grow: 1; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
    min-width: 0; 
 
} 
 

 
.el { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.child1 { 
 
    background: red; 
 
} 
 

 
.child2 { 
 
    background: blue; 
 
    overflow:hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.child3 { 
 
    background: green; 
 
} 
 

 
.wrapper>* { 
 
    padding: 5px; 
 
}

<div class="wrapper"> 
 
    <div class="child1">child1</div> 
 
    <div class="child2"> 
 
    <div class="flex"> 
 
     <div class="el">long long long text</div> 
 
     <div>a</div> 
 
    </div> 
 
    </div> 
 
    <div class="child3">child3</div> 
 
</div> 
 

 
<button onclick="toggle()">Toggle ellipsis text</button>

Answer 4

私は真ん中の子（.child2）のmin-width: 0を設定した場合、どうやらそれは魔法のように動作します。

更新 @LGSonによると、IEでは動作しません。

function toggle() { 
 
    var el = document.querySelector('.el'); 
 
    el.textContent = el.textContent === 'short' ? 'long long long text' : 'short'; 
 
}

.wrapper { 
 
    display: flex; 
 
    width: 200px; 
 
    align-content: stretch; 
 
    padding: 5px; 
 
    min-width: 0; 
 
    border: 1px solid 
 
} 
 

 
.wrapper .child2 { 
 
    flex-grow: 1; 
 
    min-width: 0; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
} 
 

 
.el { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.child1 { 
 
    background: red; 
 
} 
 

 
.child2 { 
 
    background: blue; 
 
} 
 

 
.child3 { 
 
    background: green; 
 
} 
 

 
.wrapper>* { 
 
    padding: 5px; 
 
}

<div class="wrapper"> 
 
    <div class="child1">child1</div> 
 
    <div class="child2"> 
 
    <div class="flex"> 
 
     <div class="el">long long long text</div> 
 
     <div>a</div> 
 
    </div> 
 
    </div> 
 
    <div class="child3">child3</div> 
 
</div> 
 

 
<button onclick="toggle()">Toggle ellipsis text</button>