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

Posted 2023-03-05

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

【英文标题】：CSS text-overflow ellipsis not working in Grid / Flex

【发布时间】：2018-12-23 08:53:27

【问题描述】：

我无法让 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>

【问题讨论】：

显示：弹性；不与省略号混合，它应该包含标签而不是纯文本。可能是省略号未触发的原因。 flex 也是一个网格系统 :(

【参考方案1】：

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

【参考方案2】：

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

在您的代码中，您在 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

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

understanding the flex minimum sizing algorithm understand anonymous flex items