省略記号は

Question

を（フレキシボックス）が動作しません。私は、テキストのオーバーフローのために省略記号を入れしようとしている：

親：

.grid-row { 
    display: flex; 
} 

子：

.grid-cell { 
    display: flex; 
    flex-grow: 3; 
    flex-basis: 0; 
    align-items: center; 
    padding: 10px; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
} 

.grid-cell:first-child { 
    flex-grow: 1; 
    justify-content: center; 
} 

そして、うまくoverflowはhiddenですしかし、省略記号はありません。

Answer 1

を設定する必要があります - あなたのgrid-rowにwidthを設定します。

またgrid-cellからdisplay: flexを削除 - デモ下記参照：

.grid-row { 
 
    display: flex; 
 
    width: 250px; 
 
} 
 
.grid-cell { 
 
    /*display: flex;*/ 
 
    flex-grow: 3; 
 
    flex-basis: 0; 
 
    /*align-items: center;*/ 
 
    padding: 10px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.grid-cell:first-child { 
 
    flex-grow: 1; 
 
    justify-content: center; 
 
}

<div class="grid-row"> 
 
    <div class="grid-cell">insert text here</div> 
 
    <div class="grid-cell">some text</div> 
 
    <div class="grid-cell">some more text here</div> 
 
</div>

Answer 2

.grid-cell { 
    display: flex; 
    flex-grow: 3; 
    flex-basis: 0; 
    align-items: center; 
    padding: 10px; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    word-wrap:normal; 
    width: ###px; 
} 

あなたがセットwidth必要動作するテキストオーバーフローについてwidth.grid-cellの

Answer 3

あなた.grid細胞にこれを追加します。魔法のように

max-width: 100%; 
overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap; 

作品。