html - 省略号在 CSS 网格布局中不起作用

<分区>

我在带有 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>

谢谢。

最佳答案

在第二种情况下，这似乎可以通过将 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 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>

关于html - 省略号在 CSS 网格布局中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46853041/

上一篇：javascript - 单击 div 外部以将其关闭时，Event.target 不起作用

下一篇：css - 如何在 Bootstrap 中将行固定到页面底部

相关文章：

jquery - 将delay()与removeClass()一起使用

没有 Win32 API 调用的 C# 路径省略号

html - 两个可调整大小的 div ，改变一个会改变另一个

html - 绝对定位的内容溢出粘性页脚

javascript - Onclick 无法使用 html 在 iphone 中的列表上工作

jquery - 更改为 div 未反射(reflect)在浏览器上

c++ - 计算 Blob 的方向

c - c中的函数参数 '...'表示什么？

javascript - 更改 javascript 弹出窗口，以便文本不会超出页面范围

html - 是否可以创建具有离线存储功能的 HTML 5 应用程序以在 Blackberry 上运行？