我无法得到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>
要使省略号起作用，您需要将text不是容器.
在您的代码中，您在 Flex 容器（网格项）上设置省略号：
.gridItem {
display: flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: calc(50px + 2vw);
border:1px solid red;
}
容器的子级是文本。除非你不能将任何 CSS 直接应用于文本，因为它是一个匿名弹性项目（即周围没有定义标签的弹性项目）。因此，您需要将文本包装到元素中，然后应用省略号代码。
由此：
<div class="gridItem">Why no ellipsis on this div?</div>
To this:
<div class="gridItem"><span>Why no ellipsis on this div?</span></div>
然后你必须应对最小尺寸算法的弹性项目。默认情况下设置的此规则规定 Flex 项目不能小于其沿主轴线的内容。解决这个问题的方法是将flex item设置为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>
修改后的代码笔 https://codepen.io/anon/pen/KBVQwX
这些帖子提供了更详细的解释：
- 了解 Flex 最小尺寸算法 https://stackoverflow.com/a/36247448/3597276
- 了解匿名弹性项目 https://stackoverflow.com/a/33049392/3597276
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
