Ellipse funktioniert nicht im CSS-Grid-Layout

Question

Ich habe einige Probleme mit elipsis -Eigenschaft in einem div mit CSS-Gitter.

Wenn ich die Elipsis-Eigenschaft direkt in einem Raster-Kind festlegen, funktioniert es, aber wenn es in einem div in einem Raster verwendet wird, funktioniert es nicht.

Sie können hier sehen, was ist das Problem:

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>

Danke.

Answer 1

Dies scheint zu lösen, indem Sie in Ihrem zweiten Fall overflow: hidden auf den Container div anwenden.

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>