Question

我无法使文本溢出省略号在CSS网格中工作。文本被截断，但省略号不显示。这是我的CSS：

.grid {
  display: grid;
  margin: auto;
  width: 90%;
  grid-template-columns: 2fr 15fr
}

.gridItem {
  border: 1px solid red;
  display: flex;
  height: calc(50px + 2vw);
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="grid">
  <div class="gridItem">Why no ellipsis on this div?</div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
</div>

https://codepen.io/anon/pen/zLrPdr

Answer 1

要使省略号起作用，您需要定位 text 而不是 container 。

在您的代码中，您要在flex容器（网格项）上设置省略号：

.gridItem {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: calc(50px + 2vw);
    border:1px solid red;
}

容器的子项是文本。除了您不能将任何CSS直接应用于文本之外，因为它是匿名flex项目（即，其周围没有定义标签的flex项目）。因此，您需要将文本包装到一个元素中，然后应用省略号代码。

从此：

<div class="gridItem">Why no ellipsis on this div?</div>

对此：

<div class="gridItem"><span>Why no ellipsis on this div?</span></div>

然后，您必须应对弹性商品的最小尺寸算法。默认情况下设置的此规则指出，弹性项目不能小于其沿主轴的内容。解决此问题的方法是将flex项目设置为min-width: 0，它将覆盖默认的min-width: auto。

.grid {
  display: grid;
  margin: auto;
  width: 90%;
  grid-template-columns: 2fr 15fr;
}

.gridItem {
  display: flex;
  align-items: center;
  height: calc(50px + 2vw);
  border: 1px solid red;
  min-width: 0;
}

.gridItem > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="grid">
  <div class="gridItem"><span>Why no ellipsis on this div?</span></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
</div>

revised codepen

这些帖子提供了更详细的说明：

Answer 2

问题似乎是.gridItem上有display: flex;样式，如果您将其取消的话，它会起作用。如果您需要在网格项目上使用display: flex;，那么本文可能会有所帮助：https://css-tricks.com/flexbox-truncated-text/

CSS文本溢出省略号在Grid / Flex中不起作用

2 个答案: