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

Question

我无法在CSS网格中使用text-overflow省略号。文本被截断，但省略号点不会显示。这是我的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项设置为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>

修订代码笔

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

• 理解flex最小尺寸算法
• 了解匿名弹性项目

Answer 2

问题似乎是.gridItem上有display: flex;样式，如果去掉它就可以了。如果您需要在网格项目上使用display: flex;，那么本文可能会有所帮助：https://css-tricks.com/flexbox-truncated-text/