CSS text-overflow ellipsis not working in Grid / Flex

Question

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>

Answer 1

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

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;
}

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.

From this:

<div class="gridItem">Why no ellipsis on this div?</div>

To this:

<div class="gridItem"><span>Why no ellipsis on this div?</span></div>

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>

revised codepen

These posts provide more detailed explanations:

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

Answer 2

The issue seems to be that .gridItem has display: flex; styling on it, if you take that off it works. If you need to have display: flex; on your grid items then this article may be helpful: https://css-tricks.com/flexbox-truncated-text/