CSS文本溢出省略号在Grid/Flex中不起作用 [英] CSS text-overflow ellipsis not working in Grid / Flex

问题描述

我无法获得 text-overflow 省略号以在CSS网格中工作.文本被截断，但省略号不显示.这是我的CSS:

I am not able to get text-overflow ellipsis to work in a CSS grid. The text is truncated but the ellipsis dots don't show up. Here is my 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 而不是 container .

To make the ellipsis work you need to target the text not the container.

在您的代码中，您要在flex容器(网格项)上设置省略号:

In your code, you are setting the ellipsis on the flex container (a grid item):

.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项目).因此，您需要将文本包装到一个元素中，然后应用省略号代码.

The child of the container is the text. Except you can't apply any CSS directly to the text because it's an anonymous flex item (i.e., a flex item with no defined tags around it). So you need to wrap the text into an element and then apply the ellipsis code.

从此:

<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 .

Then you have to contend with the minimum sizing algorithm of flex items. This rule, set by default, states that a flex item cannot be smaller than its content along the main axis. The solution to this problem is to set the flex item to min-width: 0, which overrides the default 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>

修订后的数字笔

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

These posts provide more detailed explanations:

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

这篇关于CSS文本溢出省略号在Grid/Flex中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！