CSS Grid布局中省略号无法使用

Question

我在使用CSS Grid中的div时遇到了一些问题，希望能翻译以下相关内容。

如果我直接在网格子项中设置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>

谢谢。

- David Rojo

---

网格项的初始设置为 min-width: auto。这意味着一个项目不能比其内容更短。您可以使用 min-width: 0 或 overflow 的任何值来覆盖此默认设置，除了 visible。https://jsfiddle.net/epgghwna/ - Michael Benjamin

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 elipsis 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 work</h2>
<p>as elipsis 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>

- sol

---

完美，它运行良好 :) - David Rojo

那对我来说起了作用，谢谢！ - Wylliam Judd

看起来这个例子现在实际上是有效的。 - vhs