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

Question

我无法让 text-overflow 省略号在 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>

Answer 1

要使省略号起作用，您需要定位文本而不是容器。

在您的代码中，您在 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 元素的最小大小调整算法。此规则默认设置，规定 flex 元素不能小于其沿主轴的内容。这个问题的解决方案是将 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

这些帖子提供了更详细的解释:

• understanding the flex minimum sizing algorithm
• understand anonymous flex items