CSSのグリッドレイアウト内で省略記号が機能しない

Question

div内のelipsisプロパティをCSSグリッドで使用する際に問題が発生しています。

グリッドの子に直接elipsisプロパティを設定すると動作しますが、グリッドのdiv内で使用すると機能しません。

あなたは問題が何をここで見ることができます。

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>

ありがとうございました。

Answer 1

これは、のコンテナにoverflow: hiddenを適用することで解決されるようです。

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>