省略號不能在CSS網格佈局中工作

Question

我在使用css網格div中的elipsis屬性時遇到了一些問題。

如果我將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應用於第二種情況下的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; 
 
} 
 

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