points de suspension ne fonctionne pas (FlexBox)

Question

Je suis en train de mettre des points de suspension pour trop-plein texte:

parent

:

.grid-row { 
    display: flex; 
} 

enfant:

.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; 
} 

Et, bien le overflow est hidden , mais sans ellipses.

Answer 1

Pour débordement texte fonctionne, vous avez besoin d'un ensemble width - définir un width à votre grid-row.

Retirez également le display: flex de la grid-cell - voir la démo ci-dessous:

.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; 
} 

Vous devez définir le width de .grid-cell

Answer 3

Ajouter à votre .grid cellules:

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

fonctionne comme un charme.