省略号在 CSS 网格布局中不起作用
Ellipsis not working inside CSS Grid Layout
我在 div 和 css 网格中使用省略号 属性 时遇到一些问题。
如果我直接在网格子项中设置省略号 属性 它会起作用,但是当在网格中的 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>
谢谢。
在第二种情况下,这似乎可以通过将 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>
我在 div 和 css 网格中使用省略号 属性 时遇到一些问题。
如果我直接在网格子项中设置省略号 属性 它会起作用,但是当在网格中的 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>
谢谢。
在第二种情况下,这似乎可以通过将 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>