省略号不能在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>