Ellipsis ne fonctionnant pas dans la structure CSS Grid Layout

Question

Je rencontre des problèmes lors de l'utilisation de la propriété elipsis dans un div avec une grille CSS.

Si je mets la propriété elipsis directement dans un enfant de la grille, cela fonctionne, mais lorsqu'il est utilisé à l'intérieur d'un div dans une grille, cela ne fonctionne pas.

Vous pouvez voir ici quel est le problème:

body{ 
 
    text-align:center; 
 
} 
 
.container{ 
 
    width: 300px; 
 
    background-color:#ccc; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
} 
 

 
#grid{ 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr 1fr; 
 
} 
 

 
#grid > div{ 
 
    border:1px solid #000; 
 
    padding:5px; 
 
} 
 

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

<h2>This works</h2> 
 
<p>as selipsis class is directly in col-2 div</p> 
 
<div class="container"> 
 
    <div id="grid"> 
 
    <div class="col-1">A</div> 
 
    <div class="col-2 elipsis"> 
 
     B B B B B B B B B B B B B B B B B 
 
    </div> 
 
    <div class="col-3">C</div> 
 
    </div> 
 
</div> 
 

 
<h2>This doesn't worl</h2> 
 
<p>as selipsis class is in a div inside col-2 div</p> 
 
<div class="container"> 
 
    <div id="grid"> 
 
    <div class="col-1">A</div> 
 
    <div class="col-2"> 
 
     <div class="elipsis">B B B B B B B B B B B B B B B B B</div> 
 
    </div> 
 
    <div class="col-3">C</div> 
 
    </div> 
 
</div>

Merci.

Answer 1

Cela semble résoudre en appliquant overflow: hidden au conteneur du div dans votre deuxième cas.

body { 
 
    text-align: center; 
 
} 
 

 
.container { 
 
    width: 300px; 
 
    background-color: #ccc; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
#grid { 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr 1fr; 
 
} 
 

 
#grid>div { 
 
    border: 1px solid #000; 
 
    padding: 5px; 
 
} 
 

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

 
.col-2b { 
 
    overflow: hidden; 
 
}

<h2>This works</h2> 
 
<p>as selipsis class is directly in col-2 div</p> 
 
<div class="container"> 
 
    <div id="grid"> 
 
    <div class="col-1">A</div> 
 
    <div class="col-2 elipsis"> 
 
     B B B B B B B B B B B B B B B B B 
 
    </div> 
 
    <div class="col-3">C</div> 
 
    </div> 
 
</div> 
 

 
<h2>This doesn't worl</h2> 
 
<p>as selipsis class is in a div inside col-2 div</p> 
 
<div class="container"> 
 
    <div id="grid"> 
 
    <div class="col-1">A</div> 
 
    <div class="col-2 col-2b"> 
 
     <div class="elipsis">B B B B B B B B B B B B B B B B B</div> 
 
    </div> 
 
    <div class="col-3">C</div> 
 
    </div> 
 
</div>